@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 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 -2
- package/dist/BarChart/BarChart.d.ts.map +1 -1
- package/dist/BarChart/BarChart.js +13 -8
- package/dist/BarChart/BarChart.js.map +1 -1
- package/dist/ColorPicker/ColorPicker.d.ts +3 -2
- 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} +18 -15
- 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 -2
- package/dist/ContentWithLegend/ContentWithLegend.d.ts.map +1 -1
- package/dist/ContentWithLegend/ContentWithLegend.js +10 -7
- package/dist/ContentWithLegend/ContentWithLegend.js.map +1 -1
- package/dist/ContentWithLegend/model/content-with-legend-model.d.ts +2 -2
- package/dist/ContentWithLegend/model/content-with-legend-model.d.ts.map +1 -1
- package/dist/ContentWithLegend/model/content-with-legend-model.js +4 -5
- 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 +10 -15
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +11 -7
- package/dist/Dialog/Dialog.js.map +1 -1
- package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts +2 -2
- package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts.map +1 -1
- package/dist/Dialog/DiscardChangesConfirmationDialog.js +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 -2
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +2 -2
- package/dist/Drawer/Drawer.js.map +1 -1
- package/dist/EChart/EChart.d.ts +8 -8
- 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 -2
- package/dist/ErrorAlert.d.ts.map +1 -1
- package/dist/ErrorAlert.js +1 -1
- package/dist/ErrorAlert.js.map +1 -1
- package/dist/FontSizeSelector/FontSizeSelector.d.ts +3 -3
- package/dist/FontSizeSelector/FontSizeSelector.d.ts.map +1 -1
- package/dist/FontSizeSelector/FontSizeSelector.js +2 -2
- 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 -2
- package/dist/FormatControls/FormatControls.d.ts.map +1 -1
- package/dist/FormatControls/FormatControls.js +3 -3
- package/dist/FormatControls/FormatControls.js.map +1 -1
- package/dist/GaugeChart/GaugeChart.d.ts +4 -4
- package/dist/GaugeChart/GaugeChart.d.ts.map +1 -1
- package/dist/GaugeChart/GaugeChart.js +5 -8
- package/dist/GaugeChart/GaugeChart.js.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.d.ts +4 -4
- package/dist/InfoTooltip/InfoTooltip.d.ts.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.js +7 -8
- package/dist/InfoTooltip/InfoTooltip.js.map +1 -1
- package/dist/JSONEditor.d.ts +3 -3
- package/dist/JSONEditor.d.ts.map +1 -1
- package/dist/JSONEditor.js.map +1 -1
- package/dist/Legend/CompactLegend.d.ts +2 -2
- package/dist/Legend/CompactLegend.d.ts.map +1 -1
- package/dist/Legend/CompactLegend.js +1 -1
- package/dist/Legend/CompactLegend.js.map +1 -1
- package/dist/Legend/Legend.d.ts +2 -2
- package/dist/Legend/Legend.d.ts.map +1 -1
- package/dist/Legend/Legend.js +9 -5
- 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 -2
- package/dist/Legend/ListLegend.d.ts.map +1 -1
- package/dist/Legend/ListLegend.js +1 -1
- package/dist/Legend/ListLegend.js.map +1 -1
- package/dist/Legend/ListLegendItem.d.ts +6 -6
- package/dist/Legend/ListLegendItem.d.ts.map +1 -1
- package/dist/Legend/ListLegendItem.js +11 -19
- package/dist/Legend/ListLegendItem.js.map +1 -1
- package/dist/Legend/TableLegend.d.ts +2 -2
- package/dist/Legend/TableLegend.d.ts.map +1 -1
- package/dist/Legend/TableLegend.js +3 -2
- package/dist/Legend/TableLegend.js.map +1 -1
- package/dist/Legend/legend-model.d.ts +2 -2
- 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 +12 -17
- 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 +3 -3
- package/dist/ModeSelector/ModeSelector.d.ts.map +1 -1
- package/dist/ModeSelector/ModeSelector.js +2 -2
- package/dist/ModeSelector/ModeSelector.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts +3 -3
- package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorColumn.js +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorColumn.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts +3 -3
- package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorControl.js +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorControl.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts +3 -3
- package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGrid.js +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGrid.js.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts +3 -3
- package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGroup.js +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 -2
- package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts.map +1 -1
- package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js +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 +8 -7
- package/dist/SettingsAutocomplete/SettingsAutocomplete.js.map +1 -1
- package/dist/SortSelector/SortSelector.d.ts +3 -3
- package/dist/SortSelector/SortSelector.d.ts.map +1 -1
- package/dist/SortSelector/SortSelector.js +2 -2
- 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 -6
- package/dist/StatChart/StatChart.d.ts.map +1 -1
- package/dist/StatChart/StatChart.js +12 -18
- package/dist/StatChart/StatChart.js.map +1 -1
- package/dist/StatChart/calculateFontSize.d.ts.map +1 -1
- package/dist/StatChart/calculateFontSize.js +4 -6
- 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 +2 -2
- package/dist/Table/InnerTable.d.ts.map +1 -1
- package/dist/Table/InnerTable.js +4 -3
- package/dist/Table/InnerTable.js.map +1 -1
- package/dist/Table/Table.d.ts +2 -2
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +12 -10
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableBody.d.ts +2 -2
- package/dist/Table/TableBody.d.ts.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 +29 -7
- package/dist/Table/TableCell.js.map +1 -1
- package/dist/Table/TableCheckbox.d.ts +2 -2
- package/dist/Table/TableCheckbox.d.ts.map +1 -1
- package/dist/Table/TableCheckbox.js +1 -1
- package/dist/Table/TableCheckbox.js.map +1 -1
- package/dist/Table/TableHead.d.ts +2 -2
- package/dist/Table/TableHead.d.ts.map +1 -1
- package/dist/Table/TableHeaderCell.d.ts +3 -3
- package/dist/Table/TableHeaderCell.d.ts.map +1 -1
- package/dist/Table/TableHeaderCell.js +1 -1
- package/dist/Table/TableHeaderCell.js.map +1 -1
- package/dist/Table/TableRow.d.ts +1 -1
- package/dist/Table/TableRow.d.ts.map +1 -1
- package/dist/Table/TableRow.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 +18 -15
- package/dist/Table/VirtualizedTable.js.map +1 -1
- package/dist/Table/VirtualizedTableContainer.d.ts +2 -2
- package/dist/Table/VirtualizedTableContainer.d.ts.map +1 -1
- package/dist/Table/hooks/useTableKeyboardNav.d.ts +3 -3
- package/dist/Table/hooks/useTableKeyboardNav.d.ts.map +1 -1
- package/dist/Table/hooks/useTableKeyboardNav.js +2 -2
- 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 +8 -14
- 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 +27 -7
- package/dist/Table/model/table-model.d.ts.map +1 -1
- package/dist/Table/model/table-model.js +29 -23
- 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 +3 -3
- package/dist/ThresholdsEditor/ThresholdInput.js.map +1 -1
- package/dist/ThresholdsEditor/ThresholdsEditor.d.ts +2 -2
- package/dist/ThresholdsEditor/ThresholdsEditor.d.ts.map +1 -1
- package/dist/ThresholdsEditor/ThresholdsEditor.js +20 -27
- package/dist/ThresholdsEditor/ThresholdsEditor.js.map +1 -1
- package/dist/TimeChart/TimeChart.d.ts.map +1 -1
- package/dist/TimeChart/TimeChart.js +12 -15
- 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} +44 -29
- 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 +8 -13
- package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesInfo.d.ts +2 -2
- package/dist/TimeSeriesTooltip/SeriesInfo.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesInfo.js +2 -3
- package/dist/TimeSeriesTooltip/SeriesInfo.js.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts +2 -2
- package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesLabelsStack.js +1 -1
- package/dist/TimeSeriesTooltip/SeriesLabelsStack.js.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesMarker.d.ts +2 -2
- package/dist/TimeSeriesTooltip/SeriesMarker.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/SeriesMarker.js +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 +4 -5
- package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipContent.d.ts +2 -2
- package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipContent.js +2 -2
- package/dist/TimeSeriesTooltip/TooltipContent.js.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipHeader.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipHeader.js +7 -15
- package/dist/TimeSeriesTooltip/TooltipHeader.js.map +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.d.ts +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.js +19 -29
- package/dist/TimeSeriesTooltip/nearby-series.js.map +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts +10 -3
- 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.d.ts +6 -0
- package/dist/ToolbarIconButton/ToolbarIconButton.d.ts.map +1 -0
- package/dist/ToolbarIconButton/ToolbarIconButton.js +32 -0
- package/dist/ToolbarIconButton/ToolbarIconButton.js.map +1 -0
- package/dist/ToolbarIconButton/index.d.ts +2 -0
- package/dist/ToolbarIconButton/index.d.ts.map +1 -0
- package/dist/ToolbarIconButton/index.js +15 -0
- package/dist/ToolbarIconButton/index.js.map +1 -0
- 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 -2
- package/dist/YAxisLabel.d.ts.map +1 -1
- package/dist/YAxisLabel.js +5 -3
- 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 +14 -9
- package/dist/cjs/ColorPicker/ColorPicker.js +28 -52
- package/dist/cjs/{ThresholdsEditor/ThresholdColorPicker.js → ColorPicker/OptionsColorPicker.js} +19 -16
- package/dist/cjs/ColorPicker/index.js +1 -0
- package/dist/cjs/ContentWithLegend/ContentWithLegend.js +10 -12
- package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js +4 -5
- package/dist/cjs/DensitySelector/DensitySelector.js +54 -0
- package/dist/cjs/DensitySelector/index.js +30 -0
- package/dist/cjs/Dialog/Dialog.js +11 -7
- package/dist/cjs/Dialog/DiscardChangesConfirmationDialog.js +1 -1
- 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 +2 -2
- package/dist/cjs/EChart/EChart.js +5 -45
- package/dist/cjs/ErrorAlert.js +1 -1
- package/dist/cjs/FontSizeSelector/FontSizeSelector.js +2 -2
- package/dist/cjs/FormEditor/FormActions.js +83 -0
- package/dist/cjs/FormEditor/index.js +30 -0
- package/dist/cjs/FormatControls/FormatControls.js +3 -3
- package/dist/cjs/GaugeChart/GaugeChart.js +6 -9
- package/dist/cjs/InfoTooltip/InfoTooltip.js +7 -13
- package/dist/cjs/Legend/CompactLegend.js +1 -1
- package/dist/cjs/Legend/Legend.js +9 -5
- package/dist/cjs/Legend/LegendColorBadge.js +2 -7
- package/dist/cjs/Legend/ListLegend.js +1 -1
- package/dist/cjs/Legend/ListLegendItem.js +9 -55
- package/dist/cjs/Legend/TableLegend.js +3 -2
- package/dist/cjs/LineChart/LineChart.js +13 -18
- package/dist/cjs/LinksEditor/LinksEditor.js +174 -0
- package/dist/cjs/LinksEditor/index.js +30 -0
- package/dist/cjs/ModeSelector/ModeSelector.js +2 -2
- package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js +1 -1
- package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js +1 -1
- package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js +1 -1
- package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js +1 -1
- 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/RefreshIntervalPicker/RefreshIntervalPicker.js +1 -1
- package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js +8 -7
- package/dist/cjs/SortSelector/SortSelector.js +2 -2
- package/dist/cjs/SortSelector/SortSelectorButtons.js +50 -0
- package/dist/cjs/SortSelector/index.js +2 -1
- package/dist/cjs/StatChart/StatChart.js +15 -21
- package/dist/cjs/StatChart/calculateFontSize.js +4 -6
- 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 +4 -3
- package/dist/cjs/Table/Table.js +11 -9
- package/dist/cjs/Table/TableCell.js +29 -7
- package/dist/cjs/Table/TableCheckbox.js +1 -1
- package/dist/cjs/Table/TableHeaderCell.js +1 -1
- package/dist/cjs/Table/VirtualizedTable.js +18 -15
- package/dist/cjs/Table/hooks/useTableKeyboardNav.js +2 -2
- package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js +8 -14
- package/dist/cjs/Table/index.js +1 -7
- package/dist/cjs/Table/model/table-model.js +32 -23
- package/dist/cjs/ThresholdsEditor/ThresholdInput.js +3 -3
- package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js +23 -28
- package/dist/cjs/TimeChart/TimeChart.js +12 -15
- 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 +26 -3
- package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js +8 -13
- package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js +2 -3
- package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js +1 -1
- package/dist/cjs/TimeSeriesTooltip/SeriesMarker.js +1 -1
- package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js +4 -5
- package/dist/cjs/TimeSeriesTooltip/TooltipContent.js +2 -2
- package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js +7 -15
- package/dist/cjs/TimeSeriesTooltip/nearby-series.js +29 -39
- package/dist/cjs/TimeSeriesTooltip/tooltip-model.js +49 -29
- package/dist/cjs/TimeSeriesTooltip/utils.js +2 -4
- package/dist/cjs/ToolbarIconButton/ToolbarIconButton.js +40 -0
- package/dist/cjs/ToolbarIconButton/index.js +30 -0
- 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 +5 -3
- package/dist/cjs/context/ChartsProvider.js +4 -2
- package/dist/cjs/context/SnackbarProvider.js +1 -1
- package/dist/cjs/context/TimeZoneProvider.js +5 -3
- package/dist/cjs/controls/TextField.js +54 -0
- package/dist/cjs/controls/index.js +30 -0
- package/dist/cjs/index.js +13 -1
- package/dist/cjs/model/graph.js +3 -3
- package/dist/cjs/model/timeOption.js +19 -1
- package/dist/cjs/test-utils/theme.js +3 -3
- package/dist/cjs/theme/component-overrides/alert.js +4 -4
- package/dist/cjs/theme/component-overrides/paper.js +1 -1
- package/dist/cjs/theme/index.js +1 -0
- package/dist/cjs/theme/palette/background.js +2 -0
- package/dist/cjs/theme/palette/colors/common.js +3 -3
- package/dist/cjs/theme/theme.js +7 -7
- package/dist/cjs/utils/axis.js +3 -3
- package/dist/cjs/utils/chart-actions.js +14 -15
- package/dist/cjs/utils/format.js +21 -3
- package/dist/cjs/utils/mathjs.js +1 -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 +1 -1
- package/dist/context/ChartsProvider.js.map +1 -1
- package/dist/context/SnackbarProvider.d.ts +2 -2
- package/dist/context/SnackbarProvider.d.ts.map +1 -1
- package/dist/context/SnackbarProvider.js +1 -1
- package/dist/context/SnackbarProvider.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 +2 -2
- 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 +13 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -1
- package/dist/index.js.map +1 -1
- package/dist/model/graph.d.ts +8 -8
- package/dist/model/graph.d.ts.map +1 -1
- package/dist/model/theme.d.ts +1 -1
- package/dist/model/theme.d.ts.map +1 -1
- package/dist/model/theme.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/test/setup-tests.js.map +1 -1
- package/dist/theme/component-overrides/alert.js +4 -4
- package/dist/theme/component-overrides/alert.js.map +1 -1
- package/dist/theme/component-overrides/paper.js +1 -1
- package/dist/theme/component-overrides/paper.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/palette/colors/types.d.ts +1 -1
- package/dist/theme/palette/colors/types.d.ts.map +1 -1
- package/dist/theme/palette/colors/types.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 +6 -6
- package/dist/theme/theme.js.map +1 -1
- package/dist/theme/types/ThemeExtension.d.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/combine-sx.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/mathjs.js +1 -1
- package/dist/utils/mathjs.js.map +1 -1
- package/dist/utils/theme-gen.d.ts +1 -1
- package/dist/utils/theme-gen.d.ts.map +1 -1
- package/dist/utils/theme-gen.js +5 -7
- package/dist/utils/theme-gen.js.map +1 -1
- package/package.json +13 -9
- package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts +0 -10
- package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts.map +0 -1
- package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map +0 -1
- package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts +0 -12
- 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 -14
- 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 -4
- 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":"
|
|
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"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { Checkbox, alpha } from '@mui/material';
|
|
15
|
-
export function TableCheckbox({ color
|
|
15
|
+
export function TableCheckbox({ color, density, ...otherProps }) {
|
|
16
16
|
const isCompact = density === 'compact';
|
|
17
17
|
return /*#__PURE__*/ _jsx(Checkbox, {
|
|
18
18
|
size: isCompact ? 'small' : 'medium',
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TableHeadProps as MuiTableHeadProps } from '@mui/material';
|
|
3
|
-
|
|
4
|
-
export declare const TableHead: import("react").ForwardRefExoticComponent<
|
|
3
|
+
type TableHeadProps = MuiTableHeadProps;
|
|
4
|
+
export declare const TableHead: import("react").ForwardRefExoticComponent<Omit<TableHeadProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
|
|
5
5
|
export {};
|
|
6
6
|
//# sourceMappingURL=TableHead.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../src/Table/TableHead.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,cAAc,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAG/F,
|
|
1
|
+
{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../src/Table/TableHead.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,cAAc,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAG/F,KAAK,cAAc,GAAG,iBAAiB,CAAC;AAExC,eAAO,MAAM,SAAS,iIAEpB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import { SortDirection } from './model/table-model';
|
|
1
|
+
import { ReactElement } from 'react';
|
|
3
2
|
import { TableCellProps } from './TableCell';
|
|
3
|
+
import { SortDirection } from './model/table-model';
|
|
4
4
|
export interface TableHeaderCellProps extends TableCellProps {
|
|
5
5
|
/**
|
|
6
6
|
* Handler called when a sort event is triggered.
|
|
@@ -19,5 +19,5 @@ export interface TableHeaderCellProps extends TableCellProps {
|
|
|
19
19
|
*/
|
|
20
20
|
nextSortDirection?: SortDirection;
|
|
21
21
|
}
|
|
22
|
-
export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps):
|
|
22
|
+
export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps): ReactElement;
|
|
23
23
|
//# sourceMappingURL=TableHeaderCell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';
|
|
15
15
|
import { TableCell } from './TableCell';
|
|
16
|
-
export function TableHeaderCell({ onSort
|
|
16
|
+
export function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }) {
|
|
17
17
|
const showSortLabel = !!onSort;
|
|
18
18
|
const headerText = /*#__PURE__*/ _jsx(Typography, {
|
|
19
19
|
noWrap: true,
|
|
@@ -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"}
|
package/dist/Table/TableRow.d.ts
CHANGED
|
@@ -4,6 +4,6 @@ import { TableDensity } from './model/table-model';
|
|
|
4
4
|
interface TableRowProps extends MuiTableRowProps<'div'> {
|
|
5
5
|
density: TableDensity;
|
|
6
6
|
}
|
|
7
|
-
export declare const TableRow: import("react").ForwardRefExoticComponent<
|
|
7
|
+
export declare const TableRow: import("react").ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
|
|
8
8
|
export {};
|
|
9
9
|
//# sourceMappingURL=TableRow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,4HAanB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableRow.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 { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps, alpha } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n return (\n <MuiTableRow\n {...props}\n ref={ref}\n sx={{\n backgroundColor: (theme) => theme.palette.background.default,\n '&:hover': {\n backgroundColor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n },\n }}\n />\n );\n});\n"],"names":["TableRow","MuiTableRow","alpha","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","default","primary","main","action","hoverOpacity"],"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,YAAYC,WAAW,EAAqCC,KAAK,QAAQ,gBAAgB;AAClG,SAASC,UAAU,QAAQ,QAAQ;AAOnC,OAAO,MAAMH,yBAAWG,WAA+C,SAASH,SAASI,KAAK,EAAEC,GAAG;IACjG,qBACE,KAACJ;QACE,GAAGG,KAAK;QACTC,KAAKA;QACLC,IAAI;YACFC,iBAAiB,CAACC,QAAUA,MAAMC,
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableRow.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 { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps, alpha } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n return (\n <MuiTableRow\n {...props}\n ref={ref}\n sx={{\n backgroundColor: (theme) => theme.palette.background.default,\n '&:hover': {\n backgroundColor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n },\n }}\n />\n );\n});\n"],"names":["TableRow","MuiTableRow","alpha","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","default","primary","main","action","hoverOpacity"],"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,YAAYC,WAAW,EAAqCC,KAAK,QAAQ,gBAAgB;AAClG,SAASC,UAAU,QAAQ,QAAQ;AAOnC,OAAO,MAAMH,yBAAWG,WAA+C,SAASH,SAASI,KAAK,EAAEC,GAAG;IACjG,qBACE,KAACJ;QACE,GAAGG,KAAK;QACTC,KAAKA;QACLC,IAAI;YACFC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;YAC5D,WAAW;gBACTJ,iBAAiB,CAACC,QAAUN,MAAMM,MAAMC,OAAO,CAACG,OAAO,CAACC,IAAI,EAAEL,MAAMC,OAAO,CAACK,MAAM,CAACC,YAAY;YACjG;QACF;;AAGN,GAAG"}
|
|
@@ -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
|
|
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
|
|
@@ -64,7 +64,7 @@ export function VirtualizedTable({ width , height , density , onRowClick , onRow
|
|
|
64
64
|
},
|
|
65
65
|
TableHead,
|
|
66
66
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
67
|
-
TableRow: ({ item
|
|
67
|
+
TableRow: ({ item, ...props })=>{
|
|
68
68
|
const index = props['data-index'];
|
|
69
69
|
const row = rows[index];
|
|
70
70
|
if (!row) {
|
|
@@ -79,10 +79,10 @@ export function VirtualizedTable({ width , height , density , onRowClick , onRow
|
|
|
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 , onRow
|
|
|
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 , onRow
|
|
|
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 , onRow
|
|
|
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 , onRow
|
|
|
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 , onRow
|
|
|
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,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TableContainerProps as MuiTableContainerProps } from '@mui/material';
|
|
3
|
-
|
|
4
|
-
export declare const VirtualizedTableContainer: import("react").ForwardRefExoticComponent<
|
|
3
|
+
type VirtualizedTableContainerProps = MuiTableContainerProps;
|
|
4
|
+
export declare const VirtualizedTableContainer: import("react").ForwardRefExoticComponent<Omit<VirtualizedTableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
export {};
|
|
6
6
|
//# sourceMappingURL=VirtualizedTableContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualizedTableContainer.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTableContainer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuC,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGnH,
|
|
1
|
+
{"version":3,"file":"VirtualizedTableContainer.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTableContainer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuC,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGnH,KAAK,8BAA8B,GAAG,sBAAsB,CAAC;AAE7D,eAAO,MAAM,yBAAyB,wIAIrC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { KeyboardEventHandler } from 'react';
|
|
2
2
|
export interface UseTableKeyboardNavProps {
|
|
3
3
|
maxRows: number;
|
|
4
4
|
maxColumns: number;
|
|
@@ -12,7 +12,7 @@ export interface UseTableKeyboardNavProps {
|
|
|
12
12
|
*/
|
|
13
13
|
onActiveCellChange?: (e: React.KeyboardEvent<HTMLTableElement>, currentActiveCell: TableCellPosition, defaultNextActiveCell: TableCellPosition | undefined) => TableCellPosition | undefined;
|
|
14
14
|
}
|
|
15
|
-
|
|
15
|
+
type TableCellPosition = {
|
|
16
16
|
row: number;
|
|
17
17
|
column: number;
|
|
18
18
|
};
|
|
@@ -25,7 +25,7 @@ declare 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"}
|
|
@@ -29,7 +29,7 @@ function isArrowKey(key) {
|
|
|
29
29
|
* to be wrapped by implementation-specific tables to account for differences
|
|
30
30
|
* like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`
|
|
31
31
|
* for an example.
|
|
32
|
-
*/ export function useTableKeyboardNav({ maxRows
|
|
32
|
+
*/ export function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
|
|
33
33
|
const [activeCell, setActiveCell] = useState(DEFAULT_ACTIVE_CELL);
|
|
34
34
|
const [isActive, setIsActive] = useState(false);
|
|
35
35
|
const handleCellFocus = (cellPosition)=>{
|
|
@@ -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"}
|