@perses-dev/components 0.30.0 → 0.32.0

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,7 +62,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onLayoutChange , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
     function handleMouseOver() {
         if (truncateLabel) {
@@ -74,14 +74,11 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
             setNoWrap(true);
         }
     }
-    (0, _react.useEffect)(()=>{
-        // When `noWrap` changes, so does the layout of the component. Notifies the
-        // parent, so it can handle those changes.
-        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
-    }, [
-        noWrap,
-        onLayoutChange
-    ]);
+    const handleClick = (e)=>{
+        var ref;
+        onClick(e, item.id);
+        (ref = item.onClick) === null || ref === void 0 ? void 0 : ref.call(item, e);
+    };
     return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
         ...others,
         component: "div",
@@ -92,8 +89,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }, sx),
         dense: true,
         key: item.id,
-        onClick: item.onClick,
-        selected: item.isSelected,
+        onClick: handleClick,
+        selected: isVisuallySelected,
         ref: ref,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {

package/dist/cjs/Legend/TableLegend.js

@@ -0,0 +1,67 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableLegend", {
+    enumerable: true,
+    get: ()=>TableLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _table = require("../Table");
+const COLUMNS = [
+    {
+        accessorKey: 'label',
+        header: 'Name',
+        // Starting with `title` attr instead of a tooltip because it is easier to
+        // implement. We should try adding a tooltip in the future, but we'll need
+        // to be very careful about performance when doing so with large tables.
+        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("span", {
+                title: getValue(),
+                children: getValue()
+            })
+    }
+];
+const getRowId = (data)=>{
+    return data.id;
+};
+const getCheckboxColor = (data)=>{
+    return data.color;
+};
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+    const rowSelection = (0, _react.useMemo)(()=>{
+        return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
+        // TODO: clean this up if we switch to also using checkboxes in list legend.
+        items.reduce((allRowSelection, item, index)=>{
+            allRowSelection[getRowId(item, index)] = true;
+            return allRowSelection;
+        }, {});
+    }, [
+        initRowSelection,
+        items
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_table.Table, {
+        height: height,
+        width: width,
+        rowSelection: rowSelection,
+        onRowSelectionChange: onSelectedItemsChange,
+        data: items,
+        columns: COLUMNS,
+        density: "compact",
+        getRowId: getRowId,
+        getCheckboxColor: getCheckboxColor,
+        checkboxSelection: true
+    });
+}

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js

@@ -29,6 +29,12 @@ const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id
         ...config
     };
 });
+const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
 function LegendOptionsEditor({ value , onChange  }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
@@ -43,9 +49,18 @@ function LegendOptionsEditor({ value , onChange  }) {
             position: newValue.id
         });
     };
+    const handleLegendModeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            mode: newValue.id
+        });
+    };
     const isValidLegend = (0, _model.validateLegendSpec)(value);
     const currentPosition = (0, _model.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
-    const legendConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const legendPositionConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const currentMode = (0, _model.getLegendMode)(value === null || value === void 0 ? void 0 : value.mode);
+    const legendModeConfig = _model.LEGEND_MODE_CONFIG[currentMode];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_errorAlert.ErrorAlert, {
@@ -65,7 +80,7 @@ function LegendOptionsEditor({ value , onChange  }) {
                 label: "Position",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
-                        ...legendConfig,
+                        ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
@@ -77,6 +92,23 @@ function LegendOptionsEditor({ value , onChange  }) {
                     disabled: value === undefined,
                     disableClearable: true
                 })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Mode",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: {
+                        ...legendModeConfig,
+                        id: currentMode
+                    },
+                    options: MODE_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    onChange: handleLegendModeChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
             })
         ]
     });

package/dist/cjs/LineChart/LineChart.js

@@ -26,7 +26,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
@@ -85,20 +84,22 @@ function _interopRequireWildcard(obj, nodeInterop) {
 ]);
 function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
-    const [pinTooltip, setPinTooltip] = (0, _react.useState)(false);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const [isDragging, setIsDragging] = (0, _react.useState)(false);
+    const [startX, setStartX] = (0, _react.useState)(0);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
                 if (onDataZoom === undefined) {
                     setTimeout(()=>{
                         // workaround so unpin happens after click event
-                        setPinTooltip(false);
+                        setTooltipPinnedCoords(null);
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
@@ -122,28 +123,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     }, [
         data,
         onDataZoom,
-        setPinTooltip
+        setTooltipPinnedCoords
     ]);
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const handleOnDoubleClick = (e)=>{
-        setPinTooltip(false);
-        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
-        if (onDoubleClick === undefined) {
-            if (chartRef.current !== undefined) {
-                (0, _utils.restoreChart)(chartRef.current);
-            }
-        } else {
-            onDoubleClick(e);
-        }
-    };
     const { noDataOption  } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
-        // show symbols and axisPointer dashed line on hover
-        const isOptimizedMode = data.timeSeries.length > _graph.OPTIMIZED_MODE_SERIES_LIMIT;
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
@@ -161,13 +151,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
-                show: !isOptimizedMode,
+                show: true,
                 trigger: 'axis',
-                showContent: false,
-                axisPointer: {
-                    type: isOptimizedMode ? 'none' : 'line',
-                    z: 0
-                }
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
             },
             toolbox: {
                 feature: {
@@ -192,27 +186,67 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
         legend,
         noDataOption,
         timeZone,
-        __experimentalEChartsOptionsOverride
+        __experimentalEChartsOptionsOverride,
+        noDataVariant
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
-        onClick: ()=>{
-            setPinTooltip((current)=>!current);
+        onClick: (e)=>{
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (e.target instanceof HTMLCanvasElement) {
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return {
+                            page: {
+                                x: e.pageX,
+                                y: e.pageY
+                            },
+                            client: {
+                                x: e.clientX,
+                                y: e.clientY
+                            },
+                            plotCanvas: {
+                                x: e.nativeEvent.offsetX,
+                                y: e.nativeEvent.offsetY
+                            },
+                            target: e.target
+                        };
+                    } else {
+                        return null;
+                    }
+                });
+            }
         },
         onMouseDown: (e)=>{
-            // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
-            if (e.target instanceof HTMLCanvasElement) {
-                setShowTooltip(false);
+            const { clientX  } = e;
+            setIsDragging(true);
+            setStartX(clientX);
+        },
+        onMouseMove: (e)=>{
+            // Allow clicking inside tooltip to copy labels.
+            if (!(e.target instanceof HTMLCanvasElement)) {
+                return;
+            }
+            const { clientX  } = e;
+            if (isDragging) {
+                const deltaX = clientX - startX;
+                if (deltaX > 0) {
+                    // Hide tooltip when user drags to zoom.
+                    setShowTooltip(false);
+                }
             }
         },
         onMouseUp: ()=>{
+            setIsDragging(false);
+            setStartX(0);
             setShowTooltip(true);
         },
         onMouseLeave: ()=>{
-            setShowTooltip(false);
-            setPinTooltip(false);
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -220,14 +254,27 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 (0, _utils.enableDataZoom)(chartRef.current);
             }
         },
-        onDoubleClick: handleOnDoubleClick,
+        onDoubleClick: (e)=>{
+            setTooltipPinnedCoords(null);
+            // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+            if (onDoubleClick === undefined) {
+                if (chartRef.current !== undefined) {
+                    (0, _utils.restoreChart)(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
         children: [
             showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
-                pinTooltip: pinTooltip,
-                unit: unit
+                pinnedPos: tooltipPinnedCoords,
+                unit: unit,
+                onUnpinClick: ()=>{
+                    setTooltipPinnedCoords(null);
+                }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
                 sx: {

package/dist/cjs/StatChart/StatChart.js

@@ -80,7 +80,14 @@ function StatChart(props) {
             },
             yAxis: {
                 type: 'value',
-                show: false
+                show: false,
+                min: (value)=>{
+                    if (value.min >= 0 && value.min <= 1) {
+                        // helps with PercentDecimal units, or datasets that return 0 or 1 booleans
+                        return 0;
+                    }
+                    return value.min;
+                }
             },
             tooltip: {
                 show: false

package/dist/cjs/Table/InnerTable.js

@@ -0,0 +1,44 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "InnerTable", {
+    enumerable: true,
+    get: ()=>InnerTable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme  })=>({
+        // This value is needed to have a consistent table layout when scrolling.
+        tableLayout: 'fixed',
+        borderCollapse: 'separate',
+        backgroundColor: theme.palette.background.paper
+    }));
+const TABLE_DENSITY_CONFIG = {
+    compact: 'small',
+    standard: 'medium'
+};
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , width , ...otherProps }, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTable, {
+        ...otherProps,
+        tabIndex: -1,
+        size: TABLE_DENSITY_CONFIG[density],
+        ref: ref,
+        sx: {
+            width: width
+        }
+    });
+});

package/dist/cjs/Table/Table.js

@@ -0,0 +1,102 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Table", {
+    enumerable: true,
+    get: ()=>Table
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactTable = require("@tanstack/react-table");
+const _material = require("@mui/material");
+const _react = require("react");
+const _virtualizedTable = require("./VirtualizedTable");
+const _tableCheckbox = require("./TableCheckbox");
+const _tableModel = require("./model/table-model");
+const DEFAULT_GET_ROW_ID = (data, index)=>{
+    return `${index}`;
+};
+function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection ={} , ...otherProps }) {
+    const theme = (0, _material.useTheme)();
+    const handleRowSelectionChange = (rowSelectionUpdater)=>{
+        const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
+        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
+    };
+    const checkboxColumn = (0, _react.useMemo)(()=>{
+        return {
+            id: 'checkboxRowSelect',
+            size: 32,
+            header: ({ table  })=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
+                    checked: table.getIsAllRowsSelected(),
+                    indeterminate: table.getIsSomeRowsSelected(),
+                    onChange: table.getToggleAllRowsSelectedHandler(),
+                    color: theme.palette.text.primary,
+                    density: density
+                });
+            },
+            cell: ({ row  })=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
+                    checked: row.getIsSelected(),
+                    indeterminate: row.getIsSomeSelected(),
+                    onChange: (e)=>{
+                        row.getToggleSelectedHandler()(e);
+                    },
+                    color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
+                    density: density
+                });
+            }
+        };
+    }, [
+        density,
+        getCheckboxColor,
+        theme.palette.text.primary
+    ]);
+    const tableColumns = (0, _react.useMemo)(()=>{
+        const initTableColumns = (0, _tableModel.persesColumnsToTanstackColumns)(columns);
+        if (checkboxSelection) {
+            initTableColumns.unshift(checkboxColumn);
+        }
+        return initTableColumns;
+    }, [
+        checkboxColumn,
+        checkboxSelection,
+        columns
+    ]);
+    const table = (0, _reactTable.useReactTable)({
+        data,
+        columns: tableColumns,
+        getRowId,
+        getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+        enableRowSelection: !!checkboxSelection,
+        onRowSelectionChange: handleRowSelectionChange,
+        state: {
+            rowSelection
+        }
+    });
+    const handleRowClick = (0, _react.useCallback)((rowId)=>{
+        table.getRow(rowId).toggleSelected();
+    }, [
+        table
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_virtualizedTable.VirtualizedTable, {
+        ...otherProps,
+        density: density,
+        onRowClick: handleRowClick,
+        rows: table.getRowModel().rows,
+        columns: table.getAllFlatColumns(),
+        headers: table.getHeaderGroups()
+    });
+}

package/dist/cjs/Table/TableBody.js

@@ -0,0 +1,29 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableBody", {
+    enumerable: true,
+    get: ()=>TableBody
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableBody = /*#__PURE__*/ (0, _react.forwardRef)(function TableBody(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+        ...props,
+        ref: ref
+    });
+});

package/dist/cjs/Table/TableCell.js

@@ -0,0 +1,97 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableCell", {
+    enumerable: true,
+    get: ()=>TableCell
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _tableModel = require("./model/table-model");
+const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+        padding: 0,
+        backgroundColor: 'inherit',
+        '&.MuiTableCell-head': {
+            // Important to avoid scrolling behind the header showing through.
+            backgroundColor: theme.palette.background.paper
+        },
+        '&:focus-visible': {
+            outline: `solid 1px ${theme.palette.primary.main}`,
+            // Move inward a little to avoid getting cut off when focusing on items
+            // at the edge of the table.
+            outlineOffset: '-1px',
+            borderRadius: 0
+        }
+    }));
+function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , ...otherProps }) {
+    const theme = (0, _material.useTheme)();
+    const elRef = (0, _react.useRef)();
+    const isHeader = variant === 'head';
+    (0, _react.useEffect)(()=>{
+        if (focusState === 'trigger-focus' && elRef.current) {
+            elRef.current.focus();
+        }
+    }, [
+        focusState
+    ]);
+    const handleFocus = (e)=>{
+        var ref;
+        // From https://zellwk.com/blog/keyboard-focusable-elements/
+        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details');
+        if (nestedFocusTarget) {
+            // If the cell has a focusable child, focus it instead. Mostly used for
+            // checkbox cells, but could have other uses.
+            nestedFocusTarget.focus();
+        }
+    };
+    const handleInteractionFocusTrigger = (e)=>{
+        // We use `onClick` and `onKeyUp` events instead of `onFocus` because of
+        // some ordering issues with when the browser calls events and how this
+        // plays with the triggering of focus with keyboard interactions.
+        // These report that a focus event happened, so we can adjust the current
+        // tabindex and focuses to the right cell.
+        onFocusTrigger === null || onFocusTrigger === void 0 ? void 0 : onFocusTrigger(e);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTableCell, {
+        ...otherProps,
+        // Modify the tab index based on the currently focused cell. It's important
+        // to avoid having tabindex 0 on everything because it essentially traps
+        // a keyboard user in the table until they hit "tab" for every single
+        // cell.
+        tabIndex: focusState !== 'none' ? 0 : -1,
+        onFocus: handleFocus,
+        onClick: handleInteractionFocusTrigger,
+        onKeyUp: handleInteractionFocusTrigger,
+        sx: {
+            width: width,
+            borderBottom: isHeader ? (theme)=>`solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`
+        },
+        ref: elRef,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+                ...(0, _tableModel.getTableCellLayout)(theme, density),
+                position: 'relative',
+                // Text truncation. Currently enforced on all cells. We may control
+                // this with a prop on column config in the future.
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: children
+        })
+    });
+}