@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AlignSelector/AlignSelector.d.ts +9 -0
- package/dist/AlignSelector/AlignSelector.d.ts.map +1 -0
- package/dist/AlignSelector/AlignSelector.js +42 -0
- package/dist/AlignSelector/AlignSelector.js.map +1 -0
- package/dist/AlignSelector/index.d.ts +2 -0
- package/dist/AlignSelector/index.d.ts.map +1 -0
- package/dist/AlignSelector/index.js +15 -0
- package/dist/AlignSelector/index.js.map +1 -0
- package/dist/BarChart/BarChart.d.ts +2 -1
- package/dist/BarChart/BarChart.d.ts.map +1 -1
- package/dist/BarChart/BarChart.js +11 -6
- package/dist/BarChart/BarChart.js.map +1 -1
- package/dist/ColorPicker/ColorPicker.d.ts +3 -1
- package/dist/ColorPicker/ColorPicker.d.ts.map +1 -1
- package/dist/ColorPicker/ColorPicker.js +28 -13
- package/dist/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/ColorPicker/OptionsColorPicker.d.ts +9 -0
- package/dist/ColorPicker/OptionsColorPicker.d.ts.map +1 -0
- package/dist/{ThresholdsEditor/ThresholdColorPicker.js → ColorPicker/OptionsColorPicker.js} +16 -13
- package/dist/ColorPicker/OptionsColorPicker.js.map +1 -0
- package/dist/ColorPicker/index.d.ts +1 -0
- package/dist/ColorPicker/index.d.ts.map +1 -1
- package/dist/ColorPicker/index.js +1 -0
- package/dist/ColorPicker/index.js.map +1 -1
- package/dist/ContentWithLegend/ContentWithLegend.d.ts +2 -1
- package/dist/ContentWithLegend/ContentWithLegend.d.ts.map +1 -1
- package/dist/ContentWithLegend/ContentWithLegend.js +8 -5
- package/dist/ContentWithLegend/ContentWithLegend.js.map +1 -1
- package/dist/ContentWithLegend/model/content-with-legend-model.js +2 -3
- package/dist/ContentWithLegend/model/content-with-legend-model.js.map +1 -1
- package/dist/DensitySelector/DensitySelector.d.ts +8 -0
- package/dist/DensitySelector/DensitySelector.d.ts.map +1 -0
- package/dist/DensitySelector/DensitySelector.js +46 -0
- package/dist/DensitySelector/DensitySelector.js.map +1 -0
- package/dist/DensitySelector/index.d.ts +2 -0
- package/dist/DensitySelector/index.d.ts.map +1 -0
- package/dist/DensitySelector/index.js +15 -0
- package/dist/DensitySelector/index.js.map +1 -0
- package/dist/Dialog/Dialog.d.ts +9 -14
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +7 -3
- package/dist/Dialog/Dialog.js.map +1 -1
- package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts +2 -1
- package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts.map +1 -1
- package/dist/Dialog/DiscardChangesConfirmationDialog.js.map +1 -1
- package/dist/DragAndDrop/DragAndDropList.d.ts +24 -0
- package/dist/DragAndDrop/DragAndDropList.d.ts.map +1 -0
- package/dist/DragAndDrop/DragAndDropList.js +153 -0
- package/dist/DragAndDrop/DragAndDropList.js.map +1 -0
- package/dist/DragAndDrop/DragButton.d.ts +13 -0
- package/dist/DragAndDrop/DragButton.d.ts.map +1 -0
- package/dist/DragAndDrop/DragButton.js +97 -0
- package/dist/DragAndDrop/DragButton.js.map +1 -0
- package/dist/DragAndDrop/DropIndicator.d.ts +3 -0
- package/dist/DragAndDrop/DropIndicator.d.ts.map +1 -0
- package/dist/DragAndDrop/DropIndicator.js +44 -0
- package/dist/DragAndDrop/DropIndicator.js.map +1 -0
- package/dist/DragAndDrop/index.d.ts +4 -0
- package/dist/DragAndDrop/index.d.ts.map +1 -0
- package/dist/DragAndDrop/index.js +17 -0
- package/dist/DragAndDrop/index.js.map +1 -0
- package/dist/DragAndDrop/model.d.ts +11 -0
- package/dist/DragAndDrop/model.d.ts.map +1 -0
- package/dist/DragAndDrop/model.js +17 -0
- package/dist/DragAndDrop/model.js.map +1 -0
- package/dist/Drawer/Drawer.d.ts +2 -1
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +1 -1
- package/dist/Drawer/Drawer.js.map +1 -1
- package/dist/EChart/EChart.d.ts +2 -2
- package/dist/EChart/EChart.d.ts.map +1 -1
- package/dist/EChart/EChart.js +5 -6
- package/dist/EChart/EChart.js.map +1 -1
- package/dist/ErrorAlert.d.ts +2 -1
- package/dist/ErrorAlert.d.ts.map +1 -1
- package/dist/ErrorAlert.js.map +1 -1
- package/dist/FontSizeSelector/FontSizeSelector.d.ts +2 -1
- package/dist/FontSizeSelector/FontSizeSelector.d.ts.map +1 -1
- package/dist/FontSizeSelector/FontSizeSelector.js.map +1 -1
- package/dist/FormEditor/FormActions.d.ts +16 -0
- package/dist/FormEditor/FormActions.d.ts.map +1 -0
- package/dist/FormEditor/FormActions.js +75 -0
- package/dist/FormEditor/FormActions.js.map +1 -0
- package/dist/FormEditor/index.d.ts +2 -0
- package/dist/FormEditor/index.d.ts.map +1 -0
- package/dist/FormEditor/index.js +15 -0
- package/dist/FormEditor/index.js.map +1 -0
- package/dist/FormatControls/FormatControls.d.ts +2 -1
- package/dist/FormatControls/FormatControls.d.ts.map +1 -1
- package/dist/FormatControls/FormatControls.js +2 -2
- package/dist/FormatControls/FormatControls.js.map +1 -1
- package/dist/GaugeChart/GaugeChart.d.ts +2 -1
- package/dist/GaugeChart/GaugeChart.d.ts.map +1 -1
- package/dist/GaugeChart/GaugeChart.js +4 -7
- package/dist/GaugeChart/GaugeChart.js.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.d.ts +3 -3
- package/dist/InfoTooltip/InfoTooltip.d.ts.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.js +3 -4
- package/dist/InfoTooltip/InfoTooltip.js.map +1 -1
- package/dist/JSONEditor.d.ts +2 -1
- package/dist/JSONEditor.d.ts.map +1 -1
- package/dist/JSONEditor.js.map +1 -1
- package/dist/Legend/CompactLegend.d.ts +2 -1
- package/dist/Legend/CompactLegend.d.ts.map +1 -1
- package/dist/Legend/CompactLegend.js.map +1 -1
- package/dist/Legend/Legend.d.ts +2 -1
- package/dist/Legend/Legend.d.ts.map +1 -1
- package/dist/Legend/Legend.js +8 -4
- package/dist/Legend/Legend.js.map +1 -1
- package/dist/Legend/LegendColorBadge.d.ts +2 -2
- package/dist/Legend/LegendColorBadge.d.ts.map +1 -1
- package/dist/Legend/LegendColorBadge.js +2 -2
- package/dist/Legend/LegendColorBadge.js.map +1 -1
- package/dist/Legend/ListLegend.d.ts +2 -1
- package/dist/Legend/ListLegend.d.ts.map +1 -1
- package/dist/Legend/ListLegend.js.map +1 -1
- package/dist/Legend/ListLegendItem.d.ts +5 -5
- package/dist/Legend/ListLegendItem.d.ts.map +1 -1
- package/dist/Legend/ListLegendItem.js +8 -12
- package/dist/Legend/ListLegendItem.js.map +1 -1
- package/dist/Legend/TableLegend.d.ts +2 -1
- package/dist/Legend/TableLegend.d.ts.map +1 -1
- package/dist/Legend/TableLegend.js +1 -0
- package/dist/Legend/TableLegend.js.map +1 -1
- package/dist/Legend/legend-model.d.ts.map +1 -1
- package/dist/Legend/legend-model.js.map +1 -1
- package/dist/LineChart/LineChart.d.ts +1 -1
- package/dist/LineChart/LineChart.d.ts.map +1 -1
- package/dist/LineChart/LineChart.js +6 -11
- package/dist/LineChart/LineChart.js.map +1 -1
- package/dist/LinksEditor/LinksEditor.d.ts +8 -0
- package/dist/LinksEditor/LinksEditor.d.ts.map +1 -0
- package/dist/LinksEditor/LinksEditor.js +161 -0
- package/dist/LinksEditor/LinksEditor.js.map +1 -0
- package/dist/LinksEditor/index.d.ts +2 -0
- package/dist/LinksEditor/index.d.ts.map +1 -0
- package/dist/LinksEditor/index.js +15 -0
- package/dist/LinksEditor/index.js.map +1 -0
- package/dist/ModeSelector/ModeSelector.d.ts +2 -1
- package/dist/ModeSelector/ModeSelector.d.ts.map +1 -1
- package/dist/ModeSelector/ModeSelector.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts +2 -2
- package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorColumn.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts +2 -1
- package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorControl.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts +2 -2
- package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGrid.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts +2 -2
- package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGroup.js.map +1 -1
- package/dist/Overlay/Overlay.d.ts +16 -0
- package/dist/Overlay/Overlay.d.ts.map +1 -0
- package/dist/Overlay/Overlay.js +52 -0
- package/dist/Overlay/Overlay.js.map +1 -0
- package/dist/Overlay/index.d.ts +2 -0
- package/dist/Overlay/index.d.ts.map +1 -0
- package/dist/Overlay/index.js +15 -0
- package/dist/Overlay/index.js.map +1 -0
- package/dist/PieChart/PieChart.d.ts +14 -0
- package/dist/PieChart/PieChart.d.ts.map +1 -0
- package/dist/PieChart/PieChart.js +92 -0
- package/dist/PieChart/PieChart.js.map +1 -0
- package/dist/PieChart/index.d.ts +2 -0
- package/dist/PieChart/index.d.ts.map +1 -0
- package/dist/PieChart/index.js +15 -0
- package/dist/PieChart/index.js.map +1 -0
- package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts +2 -1
- package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts.map +1 -1
- package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map +1 -1
- package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts +2 -2
- package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts.map +1 -1
- package/dist/SettingsAutocomplete/SettingsAutocomplete.js +6 -5
- package/dist/SettingsAutocomplete/SettingsAutocomplete.js.map +1 -1
- package/dist/SortSelector/SortSelector.d.ts +2 -1
- package/dist/SortSelector/SortSelector.d.ts.map +1 -1
- package/dist/SortSelector/SortSelector.js.map +1 -1
- package/dist/SortSelector/SortSelectorButtons.d.ts +9 -0
- package/dist/SortSelector/SortSelectorButtons.d.ts.map +1 -0
- package/dist/SortSelector/SortSelectorButtons.js +42 -0
- package/dist/SortSelector/SortSelectorButtons.js.map +1 -0
- package/dist/SortSelector/index.d.ts +1 -0
- package/dist/SortSelector/index.d.ts.map +1 -1
- package/dist/SortSelector/index.js +2 -1
- package/dist/SortSelector/index.js.map +1 -1
- package/dist/StatChart/StatChart.d.ts +6 -5
- package/dist/StatChart/StatChart.d.ts.map +1 -1
- package/dist/StatChart/StatChart.js +10 -16
- package/dist/StatChart/StatChart.js.map +1 -1
- package/dist/StatChart/calculateFontSize.d.ts.map +1 -1
- package/dist/StatChart/calculateFontSize.js +2 -4
- package/dist/StatChart/calculateFontSize.js.map +1 -1
- package/dist/StatChart/utils/formatStatChartValue.d.ts +3 -0
- package/dist/StatChart/utils/formatStatChartValue.d.ts.map +1 -0
- package/dist/StatChart/utils/formatStatChartValue.js +26 -0
- package/dist/StatChart/utils/formatStatChartValue.js.map +1 -0
- package/dist/StatusHistoryChart/StatusHistoryChart.d.ts +27 -0
- package/dist/StatusHistoryChart/StatusHistoryChart.d.ts.map +1 -0
- package/dist/StatusHistoryChart/StatusHistoryChart.js +132 -0
- package/dist/StatusHistoryChart/StatusHistoryChart.js.map +1 -0
- package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts +13 -0
- package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts.map +1 -0
- package/dist/StatusHistoryChart/StatusHistoryTooltip.js +47 -0
- package/dist/StatusHistoryChart/StatusHistoryTooltip.js.map +1 -0
- package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts +2 -0
- package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts.map +1 -0
- package/dist/StatusHistoryChart/get-formatted-axis-label.js +41 -0
- package/dist/StatusHistoryChart/get-formatted-axis-label.js.map +1 -0
- package/dist/StatusHistoryChart/index.d.ts +3 -0
- package/dist/StatusHistoryChart/index.d.ts.map +1 -0
- package/dist/StatusHistoryChart/index.js +16 -0
- package/dist/StatusHistoryChart/index.js.map +1 -0
- package/dist/StatusHistoryChart/utils/get-color.d.ts +6 -0
- package/dist/StatusHistoryChart/utils/get-color.d.ts.map +1 -0
- package/dist/StatusHistoryChart/utils/get-color.js +100 -0
- package/dist/StatusHistoryChart/utils/get-color.js.map +1 -0
- package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts +3 -0
- package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts.map +1 -0
- package/dist/StatusHistoryChart/utils/get-tooltip-position.js +27 -0
- package/dist/StatusHistoryChart/utils/get-tooltip-position.js.map +1 -0
- package/dist/Table/InnerTable.d.ts.map +1 -1
- package/dist/Table/InnerTable.js +2 -1
- package/dist/Table/InnerTable.js.map +1 -1
- package/dist/Table/Table.d.ts +2 -1
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +10 -8
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableCell.d.ts +4 -2
- package/dist/Table/TableCell.d.ts.map +1 -1
- package/dist/Table/TableCell.js +28 -6
- package/dist/Table/TableCell.js.map +1 -1
- package/dist/Table/TableCheckbox.d.ts +2 -1
- package/dist/Table/TableCheckbox.d.ts.map +1 -1
- package/dist/Table/TableCheckbox.js.map +1 -1
- package/dist/Table/TableHeaderCell.d.ts +3 -2
- package/dist/Table/TableHeaderCell.d.ts.map +1 -1
- package/dist/Table/TableHeaderCell.js.map +1 -1
- package/dist/Table/VirtualizedTable.d.ts +5 -4
- package/dist/Table/VirtualizedTable.d.ts.map +1 -1
- package/dist/Table/VirtualizedTable.js +17 -14
- package/dist/Table/VirtualizedTable.js.map +1 -1
- package/dist/Table/hooks/useTableKeyboardNav.d.ts +2 -2
- package/dist/Table/hooks/useTableKeyboardNav.d.ts.map +1 -1
- package/dist/Table/hooks/useTableKeyboardNav.js +1 -1
- package/dist/Table/hooks/useTableKeyboardNav.js.map +1 -1
- package/dist/Table/hooks/useVirtualizedTableKeyboardNav.d.ts +10 -12
- package/dist/Table/hooks/useVirtualizedTableKeyboardNav.d.ts.map +1 -1
- package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js +7 -13
- package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js.map +1 -1
- package/dist/Table/index.d.ts +1 -2
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +1 -1
- package/dist/Table/index.js.map +1 -1
- package/dist/Table/model/table-model.d.ts +22 -2
- package/dist/Table/model/table-model.d.ts.map +1 -1
- package/dist/Table/model/table-model.js +27 -21
- package/dist/Table/model/table-model.js.map +1 -1
- package/dist/ThresholdsEditor/ThresholdInput.d.ts +2 -2
- package/dist/ThresholdsEditor/ThresholdInput.d.ts.map +1 -1
- package/dist/ThresholdsEditor/ThresholdInput.js +2 -2
- package/dist/ThresholdsEditor/ThresholdInput.js.map +1 -1
- package/dist/ThresholdsEditor/ThresholdsEditor.d.ts +2 -1
- package/dist/ThresholdsEditor/ThresholdsEditor.d.ts.map +1 -1
- package/dist/ThresholdsEditor/ThresholdsEditor.js +18 -26
- package/dist/ThresholdsEditor/ThresholdsEditor.js.map +1 -1
- package/dist/TimeChart/TimeChart.d.ts.map +1 -1
- package/dist/TimeChart/TimeChart.js +5 -8
- package/dist/TimeChart/TimeChart.js.map +1 -1
- package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts +19 -0
- package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts.map +1 -0
- package/dist/{DateTimeRangePicker/AbsoluteTimePicker.js → TimeRangeSelector/DateTimeRangePicker.js} +43 -28
- package/dist/TimeRangeSelector/DateTimeRangePicker.js.map +1 -0
- package/dist/TimeRangeSelector/TimeRangeSelector.d.ts +36 -0
- package/dist/TimeRangeSelector/TimeRangeSelector.d.ts.map +1 -0
- package/dist/TimeRangeSelector/TimeRangeSelector.js +119 -0
- package/dist/TimeRangeSelector/TimeRangeSelector.js.map +1 -0
- package/dist/{DateTimeRangePicker → TimeRangeSelector}/index.d.ts +1 -2
- package/dist/TimeRangeSelector/index.d.ts.map +1 -0
- package/dist/{DateTimeRangePicker → TimeRangeSelector}/index.js +2 -3
- package/dist/TimeRangeSelector/index.js.map +1 -0
- package/dist/TimeRangeSelector/utils.d.ts +25 -0
- package/dist/TimeRangeSelector/utils.d.ts.map +1 -0
- package/dist/{DateTimeRangePicker → TimeRangeSelector}/utils.js +23 -2
- package/dist/TimeRangeSelector/utils.js.map +1 -0
- package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts +2 -2
- package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/LineChartTooltip.js +6 -11
- package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesInfo.d.ts +2 -1
- package/dist/TimeSeriesTooltip/SeriesInfo.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesInfo.js +1 -2
- package/dist/TimeSeriesTooltip/SeriesInfo.js.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts +2 -1
- package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesLabelsStack.js.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesMarker.d.ts +2 -1
- package/dist/TimeSeriesTooltip/SeriesMarker.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesMarker.js.map +1 -1
- package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts +2 -2
- package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/TimeChartTooltip.js +2 -3
- package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipContent.d.ts +2 -1
- package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipContent.js.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipHeader.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipHeader.js +6 -14
- package/dist/TimeSeriesTooltip/TooltipHeader.js.map +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.js +15 -25
- package/dist/TimeSeriesTooltip/nearby-series.js.map +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts +8 -1
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.js +13 -2
- package/dist/TimeSeriesTooltip/tooltip-model.js.map +1 -1
- package/dist/TimeSeriesTooltip/utils.d.ts +1 -21
- package/dist/TimeSeriesTooltip/utils.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/utils.js +2 -4
- package/dist/TimeSeriesTooltip/utils.js.map +1 -1
- package/dist/ToolbarIconButton/ToolbarIconButton.js.map +1 -1
- package/dist/TransformsEditor/TransformEditor.d.ts +9 -0
- package/dist/TransformsEditor/TransformEditor.d.ts.map +1 -0
- package/dist/TransformsEditor/TransformEditor.js +289 -0
- package/dist/TransformsEditor/TransformEditor.js.map +1 -0
- package/dist/TransformsEditor/TransformEditorContainer.d.ts +10 -0
- package/dist/TransformsEditor/TransformEditorContainer.d.ts.map +1 -0
- package/dist/TransformsEditor/TransformEditorContainer.js +118 -0
- package/dist/TransformsEditor/TransformEditorContainer.js.map +1 -0
- package/dist/TransformsEditor/TransformsEditor.d.ts +9 -0
- package/dist/TransformsEditor/TransformsEditor.d.ts.map +1 -0
- package/dist/TransformsEditor/TransformsEditor.js +90 -0
- package/dist/TransformsEditor/TransformsEditor.js.map +1 -0
- package/dist/TransformsEditor/index.d.ts +2 -0
- package/dist/TransformsEditor/index.d.ts.map +1 -0
- package/dist/TransformsEditor/index.js +15 -0
- package/dist/TransformsEditor/index.js.map +1 -0
- package/dist/ValueMappingEditor/ValueMappingEditor.d.ts +10 -0
- package/dist/ValueMappingEditor/ValueMappingEditor.d.ts.map +1 -0
- package/dist/ValueMappingEditor/ValueMappingEditor.js +374 -0
- package/dist/ValueMappingEditor/ValueMappingEditor.js.map +1 -0
- package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts +8 -0
- package/dist/ValueMappingEditor/ValueMappingsEditor.d.ts.map +1 -0
- package/dist/ValueMappingEditor/ValueMappingsEditor.js +118 -0
- package/dist/ValueMappingEditor/ValueMappingsEditor.js.map +1 -0
- package/dist/ValueMappingEditor/index.d.ts +2 -0
- package/dist/ValueMappingEditor/index.d.ts.map +1 -0
- package/dist/ValueMappingEditor/index.js +15 -0
- package/dist/ValueMappingEditor/index.js.map +1 -0
- package/dist/YAxisLabel.d.ts +2 -1
- package/dist/YAxisLabel.d.ts.map +1 -1
- package/dist/YAxisLabel.js +4 -2
- package/dist/YAxisLabel.js.map +1 -1
- package/dist/cjs/AlignSelector/AlignSelector.js +50 -0
- package/dist/cjs/AlignSelector/index.js +30 -0
- package/dist/cjs/BarChart/BarChart.js +12 -7
- package/dist/cjs/ColorPicker/ColorPicker.js +28 -54
- package/dist/cjs/{ThresholdsEditor/ThresholdColorPicker.js → ColorPicker/OptionsColorPicker.js} +18 -15
- package/dist/cjs/ColorPicker/index.js +1 -0
- package/dist/cjs/ContentWithLegend/ContentWithLegend.js +8 -10
- package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js +2 -3
- package/dist/cjs/DensitySelector/DensitySelector.js +54 -0
- package/dist/cjs/DensitySelector/index.js +30 -0
- package/dist/cjs/Dialog/Dialog.js +7 -3
- package/dist/cjs/DragAndDrop/DragAndDropList.js +159 -0
- package/dist/cjs/DragAndDrop/DragButton.js +121 -0
- package/dist/cjs/DragAndDrop/DropIndicator.js +52 -0
- package/dist/cjs/DragAndDrop/index.js +32 -0
- package/dist/cjs/DragAndDrop/model.js +25 -0
- package/dist/cjs/Drawer/Drawer.js +1 -1
- package/dist/cjs/EChart/EChart.js +5 -47
- package/dist/cjs/FormEditor/FormActions.js +83 -0
- package/dist/cjs/FormEditor/index.js +30 -0
- package/dist/cjs/FormatControls/FormatControls.js +2 -2
- package/dist/cjs/GaugeChart/GaugeChart.js +5 -8
- package/dist/cjs/InfoTooltip/InfoTooltip.js +3 -9
- package/dist/cjs/Legend/Legend.js +8 -4
- package/dist/cjs/Legend/LegendColorBadge.js +2 -7
- package/dist/cjs/Legend/ListLegendItem.js +6 -50
- package/dist/cjs/Legend/TableLegend.js +1 -0
- package/dist/cjs/LineChart/LineChart.js +8 -13
- package/dist/cjs/LinksEditor/LinksEditor.js +174 -0
- package/dist/cjs/LinksEditor/index.js +30 -0
- package/dist/cjs/Overlay/Overlay.js +71 -0
- package/dist/cjs/Overlay/index.js +30 -0
- package/dist/cjs/PieChart/PieChart.js +100 -0
- package/dist/cjs/PieChart/index.js +30 -0
- package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js +6 -5
- package/dist/cjs/SortSelector/SortSelectorButtons.js +50 -0
- package/dist/cjs/SortSelector/index.js +2 -1
- package/dist/cjs/StatChart/StatChart.js +13 -19
- package/dist/cjs/StatChart/calculateFontSize.js +2 -4
- package/dist/cjs/StatChart/utils/formatStatChartValue.js +34 -0
- package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js +140 -0
- package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js +55 -0
- package/dist/cjs/StatusHistoryChart/get-formatted-axis-label.js +48 -0
- package/dist/cjs/StatusHistoryChart/index.js +31 -0
- package/dist/cjs/StatusHistoryChart/utils/get-color.js +125 -0
- package/dist/cjs/StatusHistoryChart/utils/get-tooltip-position.js +35 -0
- package/dist/cjs/Table/InnerTable.js +2 -1
- package/dist/cjs/Table/Table.js +9 -7
- package/dist/cjs/Table/TableCell.js +28 -6
- package/dist/cjs/Table/VirtualizedTable.js +17 -14
- package/dist/cjs/Table/hooks/useTableKeyboardNav.js +1 -1
- package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js +7 -13
- package/dist/cjs/Table/index.js +1 -7
- package/dist/cjs/Table/model/table-model.js +30 -21
- package/dist/cjs/ThresholdsEditor/ThresholdInput.js +2 -2
- package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js +18 -26
- package/dist/cjs/TimeChart/TimeChart.js +5 -8
- package/dist/cjs/{DateTimeRangePicker/AbsoluteTimePicker.js → TimeRangeSelector/DateTimeRangePicker.js} +37 -30
- package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js +127 -0
- package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/index.js +2 -3
- package/dist/cjs/{DateTimeRangePicker → TimeRangeSelector}/utils.js +24 -1
- package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js +6 -11
- package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js +1 -2
- package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js +2 -3
- package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js +6 -14
- package/dist/cjs/TimeSeriesTooltip/nearby-series.js +15 -25
- package/dist/cjs/TimeSeriesTooltip/tooltip-model.js +22 -2
- package/dist/cjs/TimeSeriesTooltip/utils.js +2 -4
- package/dist/cjs/TransformsEditor/TransformEditor.js +297 -0
- package/dist/cjs/TransformsEditor/TransformEditorContainer.js +131 -0
- package/dist/cjs/TransformsEditor/TransformsEditor.js +103 -0
- package/dist/cjs/TransformsEditor/index.js +30 -0
- package/dist/cjs/ValueMappingEditor/ValueMappingEditor.js +387 -0
- package/dist/cjs/ValueMappingEditor/ValueMappingsEditor.js +131 -0
- package/dist/cjs/ValueMappingEditor/index.js +30 -0
- package/dist/cjs/YAxisLabel.js +4 -2
- package/dist/cjs/context/TimeZoneProvider.js +1 -1
- package/dist/cjs/controls/TextField.js +54 -0
- package/dist/cjs/controls/index.js +30 -0
- package/dist/cjs/index.js +12 -1
- package/dist/cjs/model/timeOption.js +19 -1
- package/dist/cjs/theme/index.js +1 -0
- package/dist/cjs/theme/palette/background.js +2 -0
- package/dist/cjs/theme/theme.js +6 -6
- package/dist/cjs/utils/chart-actions.js +2 -3
- package/dist/cjs/utils/format.js +19 -1
- package/dist/cjs/utils/theme-gen.js +5 -7
- package/dist/context/ChartsProvider.d.ts +2 -2
- package/dist/context/ChartsProvider.d.ts.map +1 -1
- package/dist/context/ChartsProvider.js.map +1 -1
- package/dist/context/TimeZoneProvider.d.ts +4 -4
- package/dist/context/TimeZoneProvider.d.ts.map +1 -1
- package/dist/context/TimeZoneProvider.js +1 -1
- package/dist/context/TimeZoneProvider.js.map +1 -1
- package/dist/controls/TextField.d.ts +9 -0
- package/dist/controls/TextField.d.ts.map +1 -0
- package/dist/controls/TextField.js +41 -0
- package/dist/controls/TextField.js.map +1 -0
- package/dist/controls/index.d.ts +2 -0
- package/dist/controls/index.d.ts.map +1 -0
- package/dist/controls/index.js +15 -0
- package/dist/controls/index.js.map +1 -0
- package/dist/index.d.ts +12 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +12 -1
- package/dist/index.js.map +1 -1
- package/dist/model/timeOption.d.ts +2 -1
- package/dist/model/timeOption.d.ts.map +1 -1
- package/dist/model/timeOption.js +13 -2
- package/dist/model/timeOption.js.map +1 -1
- package/dist/test/render.d.ts +3 -3
- package/dist/test/render.d.ts.map +1 -1
- package/dist/test/render.js.map +1 -1
- package/dist/theme/index.d.ts +2 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +1 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/palette/background.d.ts.map +1 -1
- package/dist/theme/palette/background.js +2 -0
- package/dist/theme/palette/background.js.map +1 -1
- package/dist/theme/theme.d.ts +2 -2
- package/dist/theme/theme.d.ts.map +1 -1
- package/dist/theme/theme.js +5 -5
- package/dist/theme/theme.js.map +1 -1
- package/dist/utils/axis.d.ts +1 -7
- package/dist/utils/axis.d.ts.map +1 -1
- package/dist/utils/axis.js.map +1 -1
- package/dist/utils/chart-actions.d.ts.map +1 -1
- package/dist/utils/chart-actions.js +2 -3
- package/dist/utils/chart-actions.js.map +1 -1
- package/dist/utils/component-ids.d.ts.map +1 -1
- package/dist/utils/component-ids.js.map +1 -1
- package/dist/utils/format.d.ts +10 -4
- package/dist/utils/format.d.ts.map +1 -1
- package/dist/utils/format.js +16 -1
- package/dist/utils/format.js.map +1 -1
- package/dist/utils/theme-gen.js +5 -7
- package/dist/utils/theme-gen.js.map +1 -1
- package/package.json +12 -8
- package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts +0 -9
- package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts.map +0 -1
- package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map +0 -1
- package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts +0 -11
- package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts.map +0 -1
- package/dist/DateTimeRangePicker/DateTimeRangePicker.js +0 -80
- package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map +0 -1
- package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts +0 -13
- package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map +0 -1
- package/dist/DateTimeRangePicker/TimeRangeSelector.js +0 -67
- package/dist/DateTimeRangePicker/TimeRangeSelector.js.map +0 -1
- package/dist/DateTimeRangePicker/index.d.ts.map +0 -1
- package/dist/DateTimeRangePicker/index.js.map +0 -1
- package/dist/DateTimeRangePicker/utils.d.ts +0 -7
- package/dist/DateTimeRangePicker/utils.d.ts.map +0 -1
- package/dist/DateTimeRangePicker/utils.js.map +0 -1
- package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts +0 -3
- package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts.map +0 -1
- package/dist/ThresholdsEditor/ThresholdColorPicker.js.map +0 -1
- package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js +0 -88
- package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js +0 -80
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCheckbox.d.ts","sourceRoot":"","sources":["../../src/Table/TableCheckbox.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAY,aAAa,EAAS,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"TableCheckbox.d.ts","sourceRoot":"","sources":["../../src/Table/TableCheckbox.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAY,aAAa,EAAS,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,kBAAkB,GAAG,YAAY,CAsCjG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableCheckbox.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n color?: string;\n density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps) {\n const isCompact = density === 'compact';\n\n return (\n <Checkbox\n size={isCompact ? 'small' : 'medium'}\n {...otherProps}\n // Disable ripple and set background color below because of some issues\n // with re-rendering with the keyboard interactions that causes the ripple\n // animation to stutter.\n focusRipple={false}\n // Tab index is handled by the overall keyboard interactions for the table\n // to avoid trapping a keyboard user in a table by requiring them to tab\n // through every single checkbox.\n tabIndex={-1}\n sx={{\n color: color,\n\n padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n // Centering.\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n\n '&.Mui-checked': {\n color: color,\n },\n\n '&.Mui-focusVisible': {\n background: color ? alpha(color, 0.5) : undefined,\n },\n\n '& .MuiSvgIcon-root': { fontSize: isCompact ? 16 : 18 },\n }}\n />\n );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAiBC,KAAK,QAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableCheckbox.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n color?: string;\n density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps): ReactElement {\n const isCompact = density === 'compact';\n\n return (\n <Checkbox\n size={isCompact ? 'small' : 'medium'}\n {...otherProps}\n // Disable ripple and set background color below because of some issues\n // with re-rendering with the keyboard interactions that causes the ripple\n // animation to stutter.\n focusRipple={false}\n // Tab index is handled by the overall keyboard interactions for the table\n // to avoid trapping a keyboard user in a table by requiring them to tab\n // through every single checkbox.\n tabIndex={-1}\n sx={{\n color: color,\n\n padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n // Centering.\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n\n '&.Mui-checked': {\n color: color,\n },\n\n '&.Mui-focusVisible': {\n background: color ? alpha(color, 0.5) : undefined,\n },\n\n '& .MuiSvgIcon-root': { fontSize: isCompact ? 16 : 18 },\n }}\n />\n );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAiBC,KAAK,QAAQ,gBAAgB;AAS/D,OAAO,SAASC,cAAc,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGC,YAAgC;IACjF,MAAMC,YAAYF,YAAY;IAE9B,qBACE,KAACJ;QACCO,MAAMD,YAAY,UAAU;QAC3B,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,aAAa;QACb,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,UAAU,CAAC;QACXC,IAAI;YACFP,OAAOA;YAEPQ,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAACP,YAAY,OAAO;YAErD,aAAa;YACbQ,UAAU;YACVC,KAAK;YACLC,MAAM;YACNC,WAAW;YAEX,iBAAiB;gBACfd,OAAOA;YACT;YAEA,sBAAsB;gBACpBe,YAAYf,QAAQF,MAAME,OAAO,OAAOgB;YAC1C;YAEA,sBAAsB;gBAAEC,UAAUd,YAAY,KAAK;YAAG;QACxD;;AAGN"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
2
|
import { TableCellProps } from './TableCell';
|
|
3
|
+
import { SortDirection } from './model/table-model';
|
|
3
4
|
export interface TableHeaderCellProps extends TableCellProps {
|
|
4
5
|
/**
|
|
5
6
|
* Handler called when a sort event is triggered.
|
|
@@ -18,5 +19,5 @@ export interface TableHeaderCellProps extends TableCellProps {
|
|
|
18
19
|
*/
|
|
19
20
|
nextSortDirection?: SortDirection;
|
|
20
21
|
}
|
|
21
|
-
export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps):
|
|
22
|
+
export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps): ReactElement;
|
|
22
23
|
//# sourceMappingURL=TableHeaderCell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,oBAAoB,GAAG,YAAY,CA4CrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableHeaderCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableHeaderCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { SortDirection } from './model/table-model';\n\nexport interface TableHeaderCellProps extends TableCellProps {\n /**\n * Handler called when a sort event is triggered.\n * When specified, the header will include sorting interactions and indicators.\n */\n onSort?: ((event: unknown) => void) | undefined;\n\n /**\n * The current direction the header is sorted.\n */\n sortDirection?: SortDirection;\n\n /**\n * The next direction the header will be sorted when another sort action\n * is triggered via click/keyboard. This impacts some UI interactions (e.g.\n * the direction of the sort arrow on hover f the column is currently\n * unsorted.)\n */\n nextSortDirection?: SortDirection;\n}\n\nexport function TableHeaderCell({\n onSort,\n sortDirection,\n nextSortDirection,\n children,\n ...cellProps\n}: TableHeaderCellProps): ReactElement {\n const showSortLabel = !!onSort;\n\n const headerText = (\n <Typography noWrap variant=\"inherit\" component=\"div\" color=\"inherit\">\n {children}\n </Typography>\n );\n\n const isActive = !!sortDirection;\n const direction = isActive ? sortDirection : nextSortDirection;\n\n return (\n <TableCell {...cellProps}>\n {showSortLabel ? (\n <TableSortLabel\n onClick={onSort}\n direction={direction}\n active={isActive}\n sx={{\n // Overrides a default vertical alignment in the CSS that changes\n // the header vertical rhythm in a way that's inconsistent with\n // non-sorting headers.\n verticalAlign: 'unset',\n\n // Makes it possible to ellipsize the text if it's too long.\n maxWidth: '100%',\n\n // Make the arrow visible when focused using the keyboard to assist\n // with a11y.\n '&:focus-visible': {\n [`& .${tableSortLabelClasses.icon}`]: {\n opacity: isActive ? 1 : 0.5,\n },\n },\n }}\n >\n {headerText}\n </TableSortLabel>\n ) : (\n headerText\n )}\n </TableCell>\n );\n}\n"],"names":["TableSortLabel","Typography","tableSortLabelClasses","TableCell","TableHeaderCell","onSort","sortDirection","nextSortDirection","children","cellProps","showSortLabel","headerText","noWrap","variant","component","color","isActive","direction","onClick","active","sx","verticalAlign","maxWidth","icon","opacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,cAAc,EAAEC,UAAU,EAAEC,qBAAqB,QAAQ,gBAAgB;AAElF,SAASC,SAAS,QAAwB,cAAc;AAwBxD,OAAO,SAASC,gBAAgB,EAC9BC,MAAM,EACNC,aAAa,EACbC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACkB;IACrB,MAAMC,gBAAgB,CAAC,CAACL;IAExB,MAAMM,2BACJ,KAACV;QAAWW,MAAM;QAACC,SAAQ;QAAUC,WAAU;QAAMC,OAAM;kBACxDP;;IAIL,MAAMQ,WAAW,CAAC,CAACV;IACnB,MAAMW,YAAYD,WAAWV,gBAAgBC;IAE7C,qBACE,KAACJ;QAAW,GAAGM,SAAS;kBACrBC,8BACC,KAACV;YACCkB,SAASb;YACTY,WAAWA;YACXE,QAAQH;YACRI,IAAI;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,uBAAuB;gBACvBC,eAAe;gBAEf,4DAA4D;gBAC5DC,UAAU;gBAEV,mEAAmE;gBACnE,aAAa;gBACb,mBAAmB;oBACjB,CAAC,CAAC,GAAG,EAAEpB,sBAAsBqB,IAAI,CAAC,CAAC,CAAC,EAAE;wBACpCC,SAASR,WAAW,IAAI;oBAC1B;gBACF;YACF;sBAECL;aAGHA;;AAIR"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { Column, HeaderGroup, Row } from '@tanstack/react-table';
|
|
3
|
-
import {
|
|
4
|
-
|
|
2
|
+
import { ReactElement } from 'react';
|
|
3
|
+
import { TableCellConfigs, TableProps } from './model/table-model';
|
|
4
|
+
export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {
|
|
5
5
|
onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;
|
|
6
6
|
rows: Array<Row<TableData>>;
|
|
7
7
|
columns: Array<Column<TableData, unknown>>;
|
|
8
8
|
headers: Array<HeaderGroup<TableData>>;
|
|
9
|
+
cellConfigs?: TableCellConfigs;
|
|
9
10
|
};
|
|
10
|
-
export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, }: VirtualizedTableProps<TableData>):
|
|
11
|
+
export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, }: VirtualizedTableProps<TableData>): ReactElement;
|
|
11
12
|
//# sourceMappingURL=VirtualizedTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAmB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQtD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQtF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CAAC,CACnF,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChE,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,GACZ,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAkLjD"}
|
|
@@ -26,7 +26,7 @@ import { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeybo
|
|
|
26
26
|
// Separating out the virtualized table because we may want a paginated table
|
|
27
27
|
// in the future that does not need virtualization, and we'd likely lay them
|
|
28
28
|
// out differently.
|
|
29
|
-
export function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers }) {
|
|
29
|
+
export function VirtualizedTable({ width, height, density, defaultColumnWidth, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs }) {
|
|
30
30
|
const virtuosoRef = useRef(null);
|
|
31
31
|
// Use a ref for these values because they are only needed for keyboard
|
|
32
32
|
// focus interactions and setting them on state will lead to a significant
|
|
@@ -79,10 +79,10 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
|
|
|
79
79
|
onClick: (e)=>onRowClick(e, row.id),
|
|
80
80
|
density: density,
|
|
81
81
|
onMouseOver: (e)=>{
|
|
82
|
-
onRowMouseOver
|
|
82
|
+
onRowMouseOver?.(e, rowEventOpts);
|
|
83
83
|
},
|
|
84
84
|
onMouseOut: (e)=>{
|
|
85
|
-
onRowMouseOut
|
|
85
|
+
onRowMouseOut?.(e, rowEventOpts);
|
|
86
86
|
}
|
|
87
87
|
});
|
|
88
88
|
},
|
|
@@ -98,7 +98,7 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
|
|
|
98
98
|
width
|
|
99
99
|
]);
|
|
100
100
|
return /*#__PURE__*/ _jsx(Box, {
|
|
101
|
-
|
|
101
|
+
style: {
|
|
102
102
|
width,
|
|
103
103
|
height
|
|
104
104
|
},
|
|
@@ -116,7 +116,6 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
|
|
|
116
116
|
return /*#__PURE__*/ _jsx(TableRow, {
|
|
117
117
|
density: density,
|
|
118
118
|
children: headerGroup.headers.map((header, i, headers)=>{
|
|
119
|
-
var _column_columnDef_meta, _column_columnDef_meta1;
|
|
120
119
|
const column = header.column;
|
|
121
120
|
const position = {
|
|
122
121
|
row: 0,
|
|
@@ -128,11 +127,11 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
|
|
|
128
127
|
onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
|
|
129
128
|
sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
|
|
130
129
|
nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
|
|
131
|
-
width: column.getSize() ||
|
|
132
|
-
align:
|
|
130
|
+
width: column.getSize() || defaultColumnWidth,
|
|
131
|
+
align: column.columnDef.meta?.align,
|
|
133
132
|
variant: "head",
|
|
134
133
|
density: density,
|
|
135
|
-
description:
|
|
134
|
+
description: column.columnDef.meta?.headerDescription,
|
|
136
135
|
focusState: getFocusState(position),
|
|
137
136
|
onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
|
|
138
137
|
isFirstColumn: i === 0,
|
|
@@ -151,16 +150,16 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
|
|
|
151
150
|
}
|
|
152
151
|
return /*#__PURE__*/ _jsx(_Fragment, {
|
|
153
152
|
children: row.getVisibleCells().map((cell, i, cells)=>{
|
|
154
|
-
var _cell_column_columnDef_meta, _cell_column_columnDef_meta1;
|
|
155
153
|
const position = {
|
|
156
154
|
// Add 1 to the row index because the header is row 0
|
|
157
155
|
row: index + 1,
|
|
158
156
|
column: i
|
|
159
157
|
};
|
|
160
158
|
const cellContext = cell.getContext();
|
|
159
|
+
const cellConfig = cellConfigs?.[cellContext.cell.id];
|
|
161
160
|
const cellRenderFn = cell.column.columnDef.cell;
|
|
162
|
-
const cellContent = typeof cellRenderFn
|
|
163
|
-
const cellDescriptionDef =
|
|
161
|
+
const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
|
|
162
|
+
const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
|
|
164
163
|
let description = undefined;
|
|
165
164
|
if (typeof cellDescriptionDef === 'function') {
|
|
166
165
|
// If the cell description is a function, set the value using
|
|
@@ -173,15 +172,19 @@ export function VirtualizedTable({ width, height, density, onRowClick, onRowMous
|
|
|
173
172
|
description = cellContent;
|
|
174
173
|
}
|
|
175
174
|
return /*#__PURE__*/ _jsx(TableCell, {
|
|
176
|
-
|
|
177
|
-
|
|
175
|
+
"data-testid": cell.id,
|
|
176
|
+
title: description || cellConfig?.text || cellContent,
|
|
177
|
+
width: cell.column.getSize() || defaultColumnWidth,
|
|
178
|
+
align: cell.column.columnDef.meta?.align,
|
|
178
179
|
density: density,
|
|
179
180
|
focusState: getFocusState(position),
|
|
180
181
|
onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
|
|
181
182
|
isFirstColumn: i === 0,
|
|
182
183
|
isLastColumn: i === cells.length - 1,
|
|
183
184
|
description: description,
|
|
184
|
-
|
|
185
|
+
color: cellConfig?.textColor ?? undefined,
|
|
186
|
+
backgroundColor: cellConfig?.backgroundColor ?? undefined,
|
|
187
|
+
children: cellConfig?.text || cellContent
|
|
185
188
|
}, cell.id);
|
|
186
189
|
})
|
|
187
190
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> &\n Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n rows: Array<Row<TableData>>;\n columns: Array<Column<TableData, unknown>>;\n headers: Array<HeaderGroup<TableData>>;\n };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n width,\n height,\n density,\n onRowClick,\n onRowMouseOver,\n onRowMouseOut,\n rows,\n columns,\n headers,\n}: VirtualizedTableProps<TableData>) {\n const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n // Use a ref for these values because they are only needed for keyboard\n // focus interactions and setting them on state will lead to a significant\n // amount of unnecessary re-renders.\n const visibleRange = useRef({\n startIndex: 0,\n endIndex: 0,\n });\n const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n visibleRange.current = newVisibleRange;\n };\n\n const keyboardNav = useVirtualizedTableKeyboardNav({\n visibleRange: visibleRange,\n virtualTable: virtuosoRef,\n\n // We add 1 here for the header.\n maxRows: rows.length + 1,\n maxColumns: columns.length,\n });\n\n const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n }\n\n return 'none';\n };\n\n const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n return {\n Scroller: VirtualizedTableContainer,\n Table: (props) => {\n return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n },\n TableHead,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TableRow: ({ item, ...props }) => {\n const index = props['data-index'];\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n return (\n <TableRow\n {...props}\n onClick={(e) => onRowClick(e, row.id)}\n density={density}\n onMouseOver={(e) => {\n onRowMouseOver?.(e, rowEventOpts);\n }}\n onMouseOut={(e) => {\n onRowMouseOut?.(e, rowEventOpts);\n }}\n />\n );\n },\n TableBody,\n };\n }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n return (\n <Box sx={{ width, height }}>\n <TableVirtuoso\n ref={virtuosoRef}\n totalCount={rows.length}\n components={VirtuosoTableComponents}\n // Note: this value is impacted by overscan. See this issue if overscan\n // is added.\n // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n rangeChanged={setVisibleRange}\n fixedHeaderContent={() => {\n return (\n <>\n {headers.map((headerGroup) => {\n return (\n <TableRow key={headerGroup.id} density={density}>\n {headerGroup.headers.map((header, i, headers) => {\n const column = header.column;\n const position: TableCellPosition = {\n row: 0,\n column: i,\n };\n\n const isSorted = column.getIsSorted();\n const nextSorting = column.getNextSortingOrder();\n\n return (\n <TableHeaderCell\n key={header.id}\n onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n width={column.getSize() || 'auto'}\n align={column.columnDef.meta?.align}\n variant=\"head\"\n density={density}\n description={column.columnDef.meta?.headerDescription}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === headers.length - 1}\n >\n {flexRender(column.columnDef.header, header.getContext())}\n </TableHeaderCell>\n );\n })}\n </TableRow>\n );\n })}\n </>\n );\n }}\n itemContent={(index) => {\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n return (\n <>\n {row.getVisibleCells().map((cell, i, cells) => {\n const position: TableCellPosition = {\n // Add 1 to the row index because the header is row 0\n row: index + 1,\n column: i,\n };\n\n const cellContext = cell.getContext();\n const cellRenderFn = cell.column.columnDef.cell;\n const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;\n\n const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n let description: string | undefined = undefined;\n if (typeof cellDescriptionDef === 'function') {\n // If the cell description is a function, set the value using\n // the function.\n description = cellDescriptionDef(cellContext);\n } else if (cellDescriptionDef && typeof cellContent === 'string') {\n // If the cell description is `true` AND the cell content is\n // a string (and thus viable as a `title` attribute), use the\n // cell content.\n description = cellContent;\n }\n\n return (\n <TableCell\n key={cell.id}\n width={cell.column.getSize() || 'auto'}\n align={cell.column.columnDef.meta?.align}\n density={density}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === cells.length - 1}\n description={description}\n >\n {cellContent}\n </TableCell>\n );\n })}\n </>\n );\n }}\n />\n </Box>\n );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellRenderFn","cellContent","cellDescriptionDef","cellDescription"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo, ReactElement } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth'>\n> &\n Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n rows: Array<Row<TableData>>;\n columns: Array<Column<TableData, unknown>>;\n headers: Array<HeaderGroup<TableData>>;\n cellConfigs?: TableCellConfigs;\n };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n width,\n height,\n density,\n defaultColumnWidth,\n onRowClick,\n onRowMouseOver,\n onRowMouseOut,\n rows,\n columns,\n headers,\n cellConfigs,\n}: VirtualizedTableProps<TableData>): ReactElement {\n const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n // Use a ref for these values because they are only needed for keyboard\n // focus interactions and setting them on state will lead to a significant\n // amount of unnecessary re-renders.\n const visibleRange = useRef({\n startIndex: 0,\n endIndex: 0,\n });\n const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n visibleRange.current = newVisibleRange;\n };\n\n const keyboardNav = useVirtualizedTableKeyboardNav({\n visibleRange: visibleRange,\n virtualTable: virtuosoRef,\n\n // We add 1 here for the header.\n maxRows: rows.length + 1,\n maxColumns: columns.length,\n });\n\n const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n }\n\n return 'none';\n };\n\n const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n return {\n Scroller: VirtualizedTableContainer,\n Table: (props): ReactElement => {\n return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n },\n TableHead,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TableRow: ({ item, ...props }): ReactElement | null => {\n const index = props['data-index'];\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n return (\n <TableRow\n {...props}\n onClick={(e) => onRowClick(e, row.id)}\n density={density}\n onMouseOver={(e) => {\n onRowMouseOver?.(e, rowEventOpts);\n }}\n onMouseOut={(e) => {\n onRowMouseOut?.(e, rowEventOpts);\n }}\n />\n );\n },\n TableBody,\n };\n }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n return (\n <Box style={{ width, height }}>\n <TableVirtuoso\n ref={virtuosoRef}\n totalCount={rows.length}\n components={VirtuosoTableComponents}\n // Note: this value is impacted by overscan. See this issue if overscan\n // is added.\n // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n rangeChanged={setVisibleRange}\n fixedHeaderContent={() => {\n return (\n <>\n {headers.map((headerGroup) => {\n return (\n <TableRow key={headerGroup.id} density={density}>\n {headerGroup.headers.map((header, i, headers) => {\n const column = header.column;\n const position: TableCellPosition = {\n row: 0,\n column: i,\n };\n\n const isSorted = column.getIsSorted();\n const nextSorting = column.getNextSortingOrder();\n\n return (\n <TableHeaderCell\n key={header.id}\n onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n width={column.getSize() || defaultColumnWidth}\n align={column.columnDef.meta?.align}\n variant=\"head\"\n density={density}\n description={column.columnDef.meta?.headerDescription}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === headers.length - 1}\n >\n {flexRender(column.columnDef.header, header.getContext())}\n </TableHeaderCell>\n );\n })}\n </TableRow>\n );\n })}\n </>\n );\n }}\n itemContent={(index) => {\n const row = rows[index];\n if (!row) {\n return null;\n }\n\n return (\n <>\n {row.getVisibleCells().map((cell, i, cells) => {\n const position: TableCellPosition = {\n // Add 1 to the row index because the header is row 0\n row: index + 1,\n column: i,\n };\n\n const cellContext = cell.getContext();\n const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n const cellRenderFn = cell.column.columnDef.cell;\n const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n let description: string | undefined = undefined;\n if (typeof cellDescriptionDef === 'function') {\n // If the cell description is a function, set the value using\n // the function.\n description = cellDescriptionDef(cellContext);\n } else if (cellDescriptionDef && typeof cellContent === 'string') {\n // If the cell description is `true` AND the cell content is\n // a string (and thus viable as a `title` attribute), use the\n // cell content.\n description = cellContent;\n }\n\n return (\n <TableCell\n key={cell.id}\n data-testid={cell.id}\n title={description || cellConfig?.text || cellContent}\n width={cell.column.getSize() || defaultColumnWidth}\n align={cell.column.columnDef.meta?.align}\n density={density}\n focusState={getFocusState(position)}\n onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n isFirstColumn={i === 0}\n isLastColumn={i === cells.length - 1}\n description={description}\n color={cellConfig?.textColor ?? undefined}\n backgroundColor={cellConfig?.backgroundColor ?? undefined}\n >\n {cellConfig?.text || cellContent}\n </TableCell>\n );\n })}\n </>\n );\n }}\n />\n </Box>\n );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","defaultColumnWidth","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","data-testid","title","text","color","textColor","backgroundColor"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { KeyboardEventHandler } from 'react';
|
|
2
2
|
export interface UseTableKeyboardNavProps {
|
|
3
3
|
maxRows: number;
|
|
4
4
|
maxColumns: number;
|
|
@@ -25,7 +25,7 @@ type TableCellPosition = {
|
|
|
25
25
|
export declare function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {
|
|
26
26
|
activeCell: TableCellPosition;
|
|
27
27
|
isActive: boolean;
|
|
28
|
-
onTableKeyDown:
|
|
28
|
+
onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;
|
|
29
29
|
onCellFocus: (cellPosition: TableCellPosition) => void;
|
|
30
30
|
};
|
|
31
31
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"useTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,OAAO,CAAC;AAEpE,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CACnB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,KACjD,iBAAiB,GAAG,SAAS,CAAC;CACpC;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,EAAE,wBAAwB,GAAG;IAC1G,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACxD,CAqEA"}
|
|
@@ -73,7 +73,7 @@ function isArrowKey(key) {
|
|
|
73
73
|
column: nextColumn,
|
|
74
74
|
row: nextRow
|
|
75
75
|
};
|
|
76
|
-
const newPosition =
|
|
76
|
+
const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;
|
|
77
77
|
if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
|
|
78
78
|
// Return original to avoid creating a new object if nothing
|
|
79
79
|
// changed.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n maxRows: number;\n maxColumns: number;\n\n /**\n * Function used to modify the active table cell based on the keyboard event,\n * the current position, and the default recommended next position (this value\n * will be `undefined` in cases where there is no default handler like `PageUp`\n * and `PageDown`). This can be used to modify the next position that will be\n * used and/or to handle side effects related to the new position (e.g.\n * pagination, scrolling the active cell into view).\n */\n onActiveCellChange?: (\n e: React.KeyboardEvent<HTMLTableElement>,\n currentActiveCell: TableCellPosition,\n defaultNextActiveCell: TableCellPosition | undefined\n ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n row: 0,\n column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string) {\n return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps) {\n const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n const [isActive, setIsActive] = useState(false);\n\n const handleCellFocus = (cellPosition: TableCellPosition) => {\n if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n return;\n }\n setIsActive(true);\n setActiveCell(cellPosition);\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n (e) => {\n // Including some of the basic a11y keyboard interaction patterns from:\n // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n // TODO: add other keyboard combos.\n const key = e.key;\n\n if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n setActiveCell((curActiveCell) => {\n let nextRow: number = curActiveCell.row;\n let nextColumn: number = curActiveCell.column;\n\n if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n e.preventDefault();\n nextColumn += 1;\n } else if (key === 'ArrowLeft' && nextColumn > 0) {\n e.preventDefault();\n nextColumn -= 1;\n } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n e.preventDefault();\n nextRow += 1;\n } else if (key === 'ArrowUp' && nextRow > 0) {\n e.preventDefault();\n nextRow -= 1;\n } else if (key === 'Home') {\n e.preventDefault();\n nextRow = 0;\n nextColumn = 0;\n } else if (key === 'End') {\n e.preventDefault();\n nextRow = maxRows - 1;\n nextColumn = maxColumns - 1;\n }\n\n const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n // Return original to avoid creating a new object if nothing\n // changed.\n return curActiveCell;\n }\n\n return newPosition;\n });\n }\n },\n [maxColumns, maxRows, onActiveCellChange]\n );\n\n return {\n activeCell,\n isActive,\n onTableKeyDown: handleKeyDown,\n onCellFocus: handleCellFocus,\n };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","onTableKeyDown","onCellFocus"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { KeyboardEventHandler, useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n maxRows: number;\n maxColumns: number;\n\n /**\n * Function used to modify the active table cell based on the keyboard event,\n * the current position, and the default recommended next position (this value\n * will be `undefined` in cases where there is no default handler like `PageUp`\n * and `PageDown`). This can be used to modify the next position that will be\n * used and/or to handle side effects related to the new position (e.g.\n * pagination, scrolling the active cell into view).\n */\n onActiveCellChange?: (\n e: React.KeyboardEvent<HTMLTableElement>,\n currentActiveCell: TableCellPosition,\n defaultNextActiveCell: TableCellPosition | undefined\n ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n row: 0,\n column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string): boolean {\n return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {\n activeCell: TableCellPosition;\n isActive: boolean;\n onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n onCellFocus: (cellPosition: TableCellPosition) => void;\n} {\n const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n const [isActive, setIsActive] = useState(false);\n\n const handleCellFocus = (cellPosition: TableCellPosition): void => {\n if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n return;\n }\n setIsActive(true);\n setActiveCell(cellPosition);\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n (e) => {\n // Including some of the basic a11y keyboard interaction patterns from:\n // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n // TODO: add other keyboard combos.\n const key = e.key;\n\n if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n setActiveCell((curActiveCell) => {\n let nextRow: number = curActiveCell.row;\n let nextColumn: number = curActiveCell.column;\n\n if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n e.preventDefault();\n nextColumn += 1;\n } else if (key === 'ArrowLeft' && nextColumn > 0) {\n e.preventDefault();\n nextColumn -= 1;\n } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n e.preventDefault();\n nextRow += 1;\n } else if (key === 'ArrowUp' && nextRow > 0) {\n e.preventDefault();\n nextRow -= 1;\n } else if (key === 'Home') {\n e.preventDefault();\n nextRow = 0;\n nextColumn = 0;\n } else if (key === 'End') {\n e.preventDefault();\n nextRow = maxRows - 1;\n nextColumn = maxColumns - 1;\n }\n\n const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n // Return original to avoid creating a new object if nothing\n // changed.\n return curActiveCell;\n }\n\n return newPosition;\n });\n }\n },\n [maxColumns, maxRows, onActiveCellChange]\n );\n\n return {\n activeCell,\n isActive,\n onTableKeyDown: handleKeyDown,\n onCellFocus: handleCellFocus,\n };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","onTableKeyDown","onCellFocus"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAA+BA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0BpE,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa;IAAC;IAAc;IAAa;IAAW;CAAY;AAEtE,SAASC,WAAWC,GAAW;IAC7B,OAAOF,WAAWG,QAAQ,CAACD;AAC7B;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IAMvG,MAAM,CAACC,YAAYC,cAAc,GAAGb,SAA4BC;IAChE,MAAM,CAACa,UAAUC,YAAY,GAAGf,SAAS;IAEzC,MAAMgB,kBAAkB,CAACC;QACvB,IAAIA,aAAad,MAAM,KAAKS,WAAWT,MAAM,IAAIc,aAAaf,GAAG,KAAKU,WAAWV,GAAG,IAAIY,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DnB,YAClE,CAACoB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAclB,GAAG;gBACvC,IAAIoB,aAAqBF,cAAcjB,MAAM;gBAE7C,IAAIG,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAErB,QAAQmB;oBAAYpB,KAAKmB;gBAAQ;gBAE9D,MAAMI,cAAcd,qBAAqBQ,GAAGC,eAAeI,uBAAuBA;gBAElF,IAAIC,YAAYvB,GAAG,KAAKkB,cAAclB,GAAG,IAAIuB,YAAYtB,MAAM,KAAKiB,cAAcjB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOiB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,OAAO;QACLC;QACAE;QACAY,gBAAgBR;QAChBS,aAAaX;IACf;AACF"}
|
|
@@ -1,29 +1,27 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { TableVirtuosoHandle } from 'react-virtuoso';
|
|
2
|
+
import { KeyboardEventHandler, MutableRefObject, RefObject } from 'react';
|
|
3
3
|
import { UseTableKeyboardNavProps } from './useTableKeyboardNav';
|
|
4
4
|
interface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {
|
|
5
|
-
visibleRange:
|
|
5
|
+
visibleRange: MutableRefObject<{
|
|
6
6
|
startIndex: number;
|
|
7
7
|
endIndex: number;
|
|
8
8
|
}>;
|
|
9
|
-
virtualTable:
|
|
9
|
+
virtualTable: RefObject<TableVirtuosoHandle>;
|
|
10
10
|
maxRows: number;
|
|
11
11
|
maxColumns: number;
|
|
12
12
|
}
|
|
13
|
+
type TableCellPosition = {
|
|
14
|
+
row: number;
|
|
15
|
+
column: number;
|
|
16
|
+
};
|
|
13
17
|
/**
|
|
14
18
|
* Hook for managing keyboard navigation when using a virtualized table.
|
|
15
19
|
*/
|
|
16
20
|
export declare function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns, }: UseVirtualizedTableKeyboardNavProps): {
|
|
17
|
-
activeCell:
|
|
18
|
-
row: number;
|
|
19
|
-
column: number;
|
|
20
|
-
};
|
|
21
|
+
activeCell: TableCellPosition;
|
|
21
22
|
isActive: boolean;
|
|
22
|
-
onTableKeyDown:
|
|
23
|
-
onCellFocus: (cellPosition:
|
|
24
|
-
row: number;
|
|
25
|
-
column: number;
|
|
26
|
-
}) => void;
|
|
23
|
+
onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;
|
|
24
|
+
onCellFocus: (cellPosition: TableCellPosition) => void;
|
|
27
25
|
};
|
|
28
26
|
export {};
|
|
29
27
|
//# sourceMappingURL=useVirtualizedTableKeyboardNav.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,gBAAgB,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC,GAAG;IACvC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACxD,CA4EA"}
|
|
@@ -20,14 +20,12 @@ import { useTableKeyboardNav } from './useTableKeyboardNav';
|
|
|
20
20
|
onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
|
|
21
21
|
const key = e.key;
|
|
22
22
|
const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
|
|
23
|
-
|
|
24
|
-
const nextRow = (_defaultNewPosition_row = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && _defaultNewPosition_row !== void 0 ? _defaultNewPosition_row : currentPosition.row;
|
|
23
|
+
const nextRow = defaultNewPosition?.row ?? currentPosition.row;
|
|
25
24
|
if (key === 'ArrowDown' && defaultValueChanged) {
|
|
26
25
|
// Use default cell position. Shift the virtual table scroll position
|
|
27
26
|
// when needed to make the active cell visible.
|
|
28
27
|
if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
|
|
29
|
-
|
|
30
|
-
(_virtualTable_current = virtualTable.current) === null || _virtualTable_current === void 0 ? void 0 : _virtualTable_current.scrollToIndex({
|
|
28
|
+
virtualTable.current?.scrollToIndex({
|
|
31
29
|
index: nextRow - 1,
|
|
32
30
|
align: 'end'
|
|
33
31
|
});
|
|
@@ -36,28 +34,25 @@ import { useTableKeyboardNav } from './useTableKeyboardNav';
|
|
|
36
34
|
// Use default cell position. Shift the virtual table scroll position
|
|
37
35
|
// when needed to make the active cell visible.
|
|
38
36
|
if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
|
|
39
|
-
|
|
40
|
-
(_virtualTable_current1 = virtualTable.current) === null || _virtualTable_current1 === void 0 ? void 0 : _virtualTable_current1.scrollToIndex({
|
|
37
|
+
virtualTable.current?.scrollToIndex({
|
|
41
38
|
index: nextRow - 1,
|
|
42
39
|
align: 'start'
|
|
43
40
|
});
|
|
44
41
|
}
|
|
45
42
|
} else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
|
|
46
|
-
|
|
43
|
+
// Use default cell position. Shift the virtual table scroll position
|
|
47
44
|
// when needed to make the active cell visible.
|
|
48
|
-
|
|
49
|
-
(_virtualTable_current2 = virtualTable.current) === null || _virtualTable_current2 === void 0 ? void 0 : _virtualTable_current2.scrollToIndex({
|
|
45
|
+
virtualTable.current?.scrollToIndex({
|
|
50
46
|
index: Math.max(nextRow - 1, 0),
|
|
51
47
|
align: 'start'
|
|
52
48
|
});
|
|
53
49
|
} else if (key === 'PageDown') {
|
|
54
|
-
var _virtualTable_current3;
|
|
55
50
|
// Full handling of logic for `PageDown` because there is no default.
|
|
56
51
|
e.preventDefault();
|
|
57
52
|
let nextRow = currentPosition.row;
|
|
58
53
|
// Add 1 to account for header
|
|
59
54
|
nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
|
|
60
|
-
|
|
55
|
+
virtualTable.current?.scrollToIndex({
|
|
61
56
|
index: nextRow - 1,
|
|
62
57
|
align: 'start'
|
|
63
58
|
});
|
|
@@ -66,12 +61,11 @@ import { useTableKeyboardNav } from './useTableKeyboardNav';
|
|
|
66
61
|
column: currentPosition.column
|
|
67
62
|
};
|
|
68
63
|
} else if (key === 'PageUp') {
|
|
69
|
-
var _virtualTable_current4;
|
|
70
64
|
// Full handling of logic for `PageUp` because there is no default.
|
|
71
65
|
let nextRow = currentPosition.row;
|
|
72
66
|
// Minus 1 to account for header
|
|
73
67
|
nextRow = Math.max(0, visibleRange.current.startIndex - 1);
|
|
74
|
-
|
|
68
|
+
virtualTable.current?.scrollToIndex({
|
|
75
69
|
index: nextRow - 1,
|
|
76
70
|
align: 'end'
|
|
77
71
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableVirtuosoHandle } from 'react-virtuoso';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n visibleRange:
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableVirtuosoHandle } from 'react-virtuoso';\nimport { KeyboardEventHandler, MutableRefObject, RefObject } from 'react';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n visibleRange: MutableRefObject<{\n startIndex: number;\n endIndex: number;\n }>;\n virtualTable: RefObject<TableVirtuosoHandle>;\n maxRows: number;\n maxColumns: number;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\n/**\n * Hook for managing keyboard navigation when using a virtualized table.\n */\nexport function useVirtualizedTableKeyboardNav({\n visibleRange,\n virtualTable,\n maxRows,\n maxColumns,\n}: UseVirtualizedTableKeyboardNavProps): {\n activeCell: TableCellPosition;\n isActive: boolean;\n onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n onCellFocus: (cellPosition: TableCellPosition) => void;\n} {\n const baseKeyboard = useTableKeyboardNav({\n maxRows,\n maxColumns,\n onActiveCellChange: (e, currentPosition, defaultNewPosition) => {\n const key = e.key;\n\n const defaultValueChanged =\n defaultNewPosition &&\n (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);\n const nextRow = defaultNewPosition?.row ?? currentPosition.row;\n\n if (key === 'ArrowDown' && defaultValueChanged) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'end',\n });\n }\n } else if (key === 'ArrowUp' && defaultValueChanged) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'start',\n });\n }\n } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {\n // Use default cell position. Shift the virtual table scroll position\n // when needed to make the active cell visible.\n virtualTable.current?.scrollToIndex({\n index: Math.max(nextRow - 1, 0),\n align: 'start',\n });\n } else if (key === 'PageDown') {\n // Full handling of logic for `PageDown` because there is no default.\n e.preventDefault();\n\n let nextRow = currentPosition.row;\n // Add 1 to account for header\n\n nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);\n\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'start',\n });\n\n return {\n row: nextRow,\n column: currentPosition.column,\n };\n } else if (key === 'PageUp') {\n // Full handling of logic for `PageUp` because there is no default.\n let nextRow = currentPosition.row;\n // Minus 1 to account for header\n nextRow = Math.max(0, visibleRange.current.startIndex - 1);\n virtualTable.current?.scrollToIndex({\n index: nextRow - 1,\n align: 'end',\n });\n\n return {\n row: nextRow,\n column: currentPosition.column,\n };\n }\n\n return defaultNewPosition;\n },\n });\n\n return baseKeyboard;\n}\n"],"names":["useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","baseKeyboard","onActiveCellChange","e","currentPosition","defaultNewPosition","key","defaultValueChanged","column","row","nextRow","current","startIndex","endIndex","scrollToIndex","index","align","Math","max","preventDefault","min"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,SAASA,mBAAmB,QAAkC,wBAAwB;AAiBtF;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,YAAY,EACZC,YAAY,EACZC,OAAO,EACPC,UAAU,EAC0B;IAMpC,MAAMC,eAAeN,oBAAoB;QACvCI;QACAC;QACAE,oBAAoB,CAACC,GAAGC,iBAAiBC;YACvC,MAAMC,MAAMH,EAAEG,GAAG;YAEjB,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,MAAM,KAAKH,mBAAmBG,MAAM,IAAIJ,gBAAgBK,GAAG,KAAKJ,mBAAmBI,GAAG,AAAD;YACxG,MAAMC,UAAUL,oBAAoBI,OAAOL,gBAAgBK,GAAG;YAE9D,IAAIH,QAAQ,eAAeC,qBAAqB;gBAC9C,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;gBACnD,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;gBACnE,qEAAqE;gBACrE,+CAA+C;gBAC/CR,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOE,KAAKC,GAAG,CAACR,UAAU,GAAG;oBAC7BM,OAAO;gBACT;YACF,OAAO,IAAIV,QAAQ,YAAY;gBAC7B,qEAAqE;gBACrEH,EAAEgB,cAAc;gBAEhB,IAAIT,UAAUN,gBAAgBK,GAAG;gBACjC,8BAA8B;gBAE9BC,UAAUO,KAAKG,GAAG,CAACrB,UAAU,GAAGF,aAAac,OAAO,CAACE,QAAQ,GAAG;gBAEhEf,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF,OAAO,IAAIF,QAAQ,UAAU;gBAC3B,mEAAmE;gBACnE,IAAII,UAAUN,gBAAgBK,GAAG;gBACjC,gCAAgC;gBAChCC,UAAUO,KAAKC,GAAG,CAAC,GAAGrB,aAAac,OAAO,CAACC,UAAU,GAAG;gBACxDd,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF;YAEA,OAAOH;QACT;IACF;IAEA,OAAOJ;AACT"}
|
package/dist/Table/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
|
package/dist/Table/index.js
CHANGED
|
@@ -11,6 +11,6 @@
|
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
export * from './Table';
|
|
14
|
-
export
|
|
14
|
+
export * from './model/table-model';
|
|
15
15
|
|
|
16
16
|
//# sourceMappingURL=index.js.map
|
package/dist/Table/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Table';\nexport
|
|
1
|
+
{"version":3,"sources":["../../src/Table/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Table';\nexport * from './model/table-model';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,UAAU;AACxB,cAAc,sBAAsB"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Theme } from '@mui/material';
|
|
3
3
|
import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
|
|
4
|
-
export
|
|
4
|
+
export declare const DEFAULT_COLUMN_WIDTH = 150;
|
|
5
|
+
export type TableDensity = 'compact' | 'standard' | 'comfortable';
|
|
5
6
|
export type SortDirection = 'asc' | 'desc' | undefined;
|
|
6
7
|
export type TableRowEventOpts = {
|
|
7
8
|
/**
|
|
@@ -33,11 +34,22 @@ export interface TableProps<TableData> {
|
|
|
33
34
|
* table rows.
|
|
34
35
|
*/
|
|
35
36
|
columns: Array<TableColumnConfig<TableData>>;
|
|
37
|
+
/**
|
|
38
|
+
* Custom render cell configurations. Each entry of the object should be an
|
|
39
|
+
* id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color
|
|
40
|
+
* and background color.
|
|
41
|
+
*/
|
|
42
|
+
cellConfigs?: TableCellConfigs;
|
|
36
43
|
/**
|
|
37
44
|
* The density of the table layout. This impacts the size and space taken up
|
|
38
45
|
* by content in the table (e.g. font size, padding).
|
|
39
46
|
*/
|
|
40
47
|
density?: TableDensity;
|
|
48
|
+
/**
|
|
49
|
+
* When using "auto", the table will try to automatically adjust the width of columns to fit without overflowing.
|
|
50
|
+
* If there is not enough width for each column, the display can unreadable.
|
|
51
|
+
*/
|
|
52
|
+
defaultColumnWidth?: 'auto' | number;
|
|
41
53
|
/**
|
|
42
54
|
* When `true`, the first column of the table will include checkboxes.
|
|
43
55
|
*/
|
|
@@ -109,6 +121,14 @@ type GetTableCellLayoutOpts = {
|
|
|
109
121
|
*/
|
|
110
122
|
export declare function getTableCellLayout(theme: Theme, density: TableDensity, { isLastColumn, isFirstColumn }?: GetTableCellLayoutOpts): TableCellLayout;
|
|
111
123
|
export type TableCellAlignment = 'left' | 'right' | 'center';
|
|
124
|
+
export interface TableCellConfigs {
|
|
125
|
+
[id: string]: TableCellConfig;
|
|
126
|
+
}
|
|
127
|
+
export interface TableCellConfig {
|
|
128
|
+
text?: string;
|
|
129
|
+
textColor?: string;
|
|
130
|
+
backgroundColor?: string;
|
|
131
|
+
}
|
|
112
132
|
declare module '@tanstack/table-core' {
|
|
113
133
|
interface ColumnMeta<TData extends RowData, TValue> {
|
|
114
134
|
align?: TableColumnConfig<TData>['align'];
|
|
@@ -156,6 +176,6 @@ export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<
|
|
|
156
176
|
/**
|
|
157
177
|
* Takes in a perses table column and transforms it into a tanstack column.
|
|
158
178
|
*/
|
|
159
|
-
export declare function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>): ColumnDef<TableData
|
|
179
|
+
export declare function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>): Array<ColumnDef<TableData>>;
|
|
160
180
|
export {};
|
|
161
181
|
//# sourceMappingURL=table-model.d.ts.map
|