@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/StatusHistoryChart/get-formatted-axis-label.js

@@ -0,0 +1,41 @@
+// Copyright 2024 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.
+import { formatWithTimeZone } from '../utils';
+// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter
+export function getFormattedStatusHistoryAxisLabel(rangeMs, timezone) {
+    return function(value) {
+        const dayMs = 86400000;
+        const monthMs = 2629440000;
+        const yearMs = 31536000000;
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > yearMs * 5) {
+            return formatWithTimeZone(timeStamp, 'yyy', timezone);
+        }
+        // more than 2 years
+        if (rangeMs > yearMs * 2) {
+            return formatWithTimeZone(timeStamp, 'MMM yyy', timezone);
+        }
+        // between 5 days to 6 months
+        if (rangeMs > dayMs * 10 && rangeMs < monthMs * 6) {
+            return formatWithTimeZone(timeStamp, 'dd.MM', timezone); // 12-01
+        }
+        // between 2 and 10 days
+        if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 10) {
+            return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timezone); // 12-01; // 12-01 12:30
+        }
+        return formatWithTimeZone(timeStamp, 'HH:mm', timezone);
+    };
+}
+
+//# sourceMappingURL=get-formatted-axis-label.js.map

package/dist/StatusHistoryChart/get-formatted-axis-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/StatusHistoryChart/get-formatted-axis-label.ts"],"sourcesContent":["// Copyright 2024 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 { formatWithTimeZone } from '../utils';\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedStatusHistoryAxisLabel(rangeMs: number, timezone: string) {\n  return function (value: number): string {\n    const dayMs = 86400000;\n    const monthMs = 2629440000;\n    const yearMs = 31536000000;\n\n    const timeStamp = new Date(Number(value));\n\n    // more than 5 years\n    if (rangeMs > yearMs * 5) {\n      return formatWithTimeZone(timeStamp, 'yyy', timezone);\n    }\n\n    // more than 2 years\n    if (rangeMs > yearMs * 2) {\n      return formatWithTimeZone(timeStamp, 'MMM yyy', timezone);\n    }\n\n    // between 5 days to 6 months\n    if (rangeMs > dayMs * 10 && rangeMs < monthMs * 6) {\n      return formatWithTimeZone(timeStamp, 'dd.MM', timezone); // 12-01\n    }\n\n    // between 2 and 10 days\n    if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 10) {\n      return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timezone); // 12-01; // 12-01 12:30\n    }\n\n    return formatWithTimeZone(timeStamp, 'HH:mm', timezone);\n  };\n}\n"],"names":["formatWithTimeZone","getFormattedStatusHistoryAxisLabel","rangeMs","timezone","value","dayMs","monthMs","yearMs","timeStamp","Date","Number"],"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,kBAAkB,QAAQ,WAAW;AAE9C,sEAAsE;AACtE,OAAO,SAASC,mCAAmCC,OAAe,EAAEC,QAAgB;IAClF,OAAO,SAAUC,KAAa;QAC5B,MAAMC,QAAQ;QACd,MAAMC,UAAU;QAChB,MAAMC,SAAS;QAEf,MAAMC,YAAY,IAAIC,KAAKC,OAAON;QAElC,oBAAoB;QACpB,IAAIF,UAAUK,SAAS,GAAG;YACxB,OAAOP,mBAAmBQ,WAAW,OAAOL;QAC9C;QAEA,oBAAoB;QACpB,IAAID,UAAUK,SAAS,GAAG;YACxB,OAAOP,mBAAmBQ,WAAW,WAAWL;QAClD;QAEA,6BAA6B;QAC7B,IAAID,UAAUG,QAAQ,MAAMH,UAAUI,UAAU,GAAG;YACjD,OAAON,mBAAmBQ,WAAW,SAASL,WAAW,QAAQ;QACnE;QAEA,wBAAwB;QACxB,IAAID,UAAUG,QAAQ,KAAKH,WAAWG,QAAQ,IAAI;YAChD,OAAOL,mBAAmBQ,WAAW,eAAeL,WAAW,wBAAwB;QACzF;QAEA,OAAOH,mBAAmBQ,WAAW,SAASL;IAChD;AACF"}

package/dist/StatusHistoryChart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './StatusHistoryChart';
+export * from './utils/get-color';
+//# sourceMappingURL=index.d.ts.map

package/dist/StatusHistoryChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC"}

package/dist/StatusHistoryChart/index.js

@@ -0,0 +1,16 @@
+// 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.
+export * from './StatusHistoryChart';
+export * from './utils/get-color';
+
+//# sourceMappingURL=index.js.map

package/dist/StatusHistoryChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/StatusHistoryChart/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './StatusHistoryChart';\nexport * from './utils/get-color';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB"}

package/dist/StatusHistoryChart/utils/get-color.d.ts

@@ -0,0 +1,6 @@
+export declare const FALLBACK_COLOR = "#1f77b4";
+export declare function getColorForValue(value: number | string, baseColor: string): string;
+export declare function getColorsForValues(uniqueValues: Array<number | string>, themeColors: string[]): string[];
+export declare function hexToHSL(hex: string): [number, number, number];
+export declare function hslToHex(h: number, s: number, l: number): string;
+//# sourceMappingURL=get-color.d.ts.map

package/dist/StatusHistoryChart/utils/get-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-color.d.ts","sourceRoot":"","sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CA2ClF;AAED,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAaxG;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CA8B9D;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAWhE"}

package/dist/StatusHistoryChart/utils/get-color.js

@@ -0,0 +1,100 @@
+// Copyright 2024 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.
+export const FALLBACK_COLOR = '#1f77b4';
+export function getColorForValue(value, baseColor) {
+    // Validate base color
+    if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {
+        baseColor = FALLBACK_COLOR;
+    }
+    try {
+        const [baseH, baseS, baseL] = hexToHSL(baseColor);
+        // Ensure numeric values are valid
+        if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {
+            throw new Error('Invalid HSL values');
+        }
+        // Create deterministic hash
+        const hash = String(value).split('').reduce((acc, char)=>acc + char.charCodeAt(0), 0);
+        const hueStep = 60;
+        const lightnessVariation = 15;
+        const hueOffset = hash % 6 * hueStep; // 6 segments of 60° each
+        const newH = (baseH + hueOffset) % 360;
+        const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);
+        // Keep saturation high for better distinction
+        const newS = Math.min(baseS + 10, 90);
+        const color = hslToHex(Math.abs(newH), Math.min(Math.max(newS, 50), 90), Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%
+        );
+        // Validate generated color
+        if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {
+            throw new Error('Invalid generated color');
+        }
+        return color;
+    } catch (_) {
+        return FALLBACK_COLOR;
+    }
+}
+export function getColorsForValues(uniqueValues, themeColors) {
+    // If we have enough theme colors, use them
+    if (themeColors.length >= uniqueValues.length) {
+        return themeColors.slice(0, uniqueValues.length);
+    }
+    // Use theme colors first, then generate additional ones
+    return uniqueValues.map((value, index)=>{
+        if (index < themeColors.length) {
+            return themeColors[index] || FALLBACK_COLOR;
+        }
+        return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);
+    });
+}
+export function hexToHSL(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch(max){
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return [
+        h * 360,
+        s * 100,
+        l * 100
+    ];
+}
+export function hslToHex(h, s, l) {
+    l /= 100;
+    const a = s * Math.min(l, 1 - l) / 100;
+    const f = (n)=>{
+        const k = (n + h / 30) % 12;
+        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color).toString(16).padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+//# sourceMappingURL=get-color.js.map

package/dist/StatusHistoryChart/utils/get-color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const FALLBACK_COLOR = '#1f77b4';\n\nexport function getColorForValue(value: number | string, baseColor: string): string {\n  // Validate base color\n  if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {\n    baseColor = FALLBACK_COLOR;\n  }\n\n  try {\n    const [baseH, baseS, baseL] = hexToHSL(baseColor);\n\n    // Ensure numeric values are valid\n    if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {\n      throw new Error('Invalid HSL values');\n    }\n\n    // Create deterministic hash\n    const hash = String(value)\n      .split('')\n      .reduce((acc, char) => acc + char.charCodeAt(0), 0);\n\n    const hueStep = 60;\n    const lightnessVariation = 15;\n\n    const hueOffset = (hash % 6) * hueStep; // 6 segments of 60° each\n    const newH = (baseH + hueOffset) % 360;\n    const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);\n\n    // Keep saturation high for better distinction\n    const newS = Math.min(baseS + 10, 90);\n    const color = hslToHex(\n      Math.abs(newH),\n      Math.min(Math.max(newS, 50), 90), // Keep saturation 50-90%\n      Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%\n    );\n\n    // Validate generated color\n    if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {\n      throw new Error('Invalid generated color');\n    }\n\n    return color;\n  } catch (_) {\n    return FALLBACK_COLOR;\n  }\n}\n\nexport function getColorsForValues(uniqueValues: Array<number | string>, themeColors: string[]): string[] {\n  // If we have enough theme colors, use them\n  if (themeColors.length >= uniqueValues.length) {\n    return themeColors.slice(0, uniqueValues.length);\n  }\n\n  // Use theme colors first, then generate additional ones\n  return uniqueValues.map((value, index) => {\n    if (index < themeColors.length) {\n      return themeColors[index] || FALLBACK_COLOR;\n    }\n    return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);\n  });\n}\n\nexport function hexToHSL(hex: string): [number, number, number] {\n  const r = parseInt(hex.slice(1, 3), 16) / 255;\n  const g = parseInt(hex.slice(3, 5), 16) / 255;\n  const b = parseInt(hex.slice(5, 7), 16) / 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h = 0;\n  let s = 0;\n  const l = (max + min) / 2;\n\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n\n  return [h * 360, s * 100, l * 100];\n}\n\nexport function hslToHex(h: number, s: number, l: number): string {\n  l /= 100;\n  const a = (s * Math.min(l, 1 - l)) / 100;\n  const f = (n: number): string => {\n    const k = (n + h / 30) % 12;\n    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n    return Math.round(255 * color)\n      .toString(16)\n      .padStart(2, '0');\n  };\n  return `#${f(0)}${f(8)}${f(4)}`;\n}\n"],"names":["FALLBACK_COLOR","getColorForValue","value","baseColor","match","baseH","baseS","baseL","hexToHSL","isNaN","Error","hash","String","split","reduce","acc","char","charCodeAt","hueStep","lightnessVariation","hueOffset","newH","newL","newS","Math","min","color","hslToHex","abs","max","_","getColorsForValues","uniqueValues","themeColors","length","slice","map","index","hex","r","parseInt","g","b","h","s","l","d","a","f","n","k","round","toString","padStart"],"mappings":"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"}

package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts

@@ -0,0 +1,3 @@
+import { TooltipComponentOption } from 'echarts';
+export declare const getTooltipPosition: TooltipComponentOption['position'];
+//# sourceMappingURL=get-tooltip-position.d.ts.map

package/dist/StatusHistoryChart/utils/get-tooltip-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-tooltip-position.d.ts","sourceRoot":"","sources":["../../../src/StatusHistoryChart/utils/get-tooltip-position.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjD,eAAO,MAAM,kBAAkB,EAAE,sBAAsB,CAAC,UAAU,CAYjE,CAAC"}

package/dist/StatusHistoryChart/utils/get-tooltip-position.js

@@ -0,0 +1,27 @@
+// Copyright 2024 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.
+export const getTooltipPosition = (...data)=>{
+    const point = data[0];
+    const size = data[4];
+    // calculate the position to avoid overflow
+    const [x, y] = point;
+    const { contentSize, viewSize } = size;
+    const posX = x + contentSize[0] > viewSize[0] ? x - contentSize[0] : x;
+    const posY = y + contentSize[1] > viewSize[1] ? y - contentSize[1] : y;
+    return [
+        posX,
+        posY
+    ];
+};
+
+//# sourceMappingURL=get-tooltip-position.js.map

package/dist/StatusHistoryChart/utils/get-tooltip-position.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/StatusHistoryChart/utils/get-tooltip-position.ts"],"sourcesContent":["// Copyright 2024 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 { TooltipComponentOption } from 'echarts';\n\nexport const getTooltipPosition: TooltipComponentOption['position'] = (...data) => {\n  const point = data[0];\n  const size = data[4];\n\n  // calculate the position to avoid overflow\n  const [x, y] = point;\n  const { contentSize, viewSize } = size;\n\n  const posX = x + contentSize[0] > viewSize[0] ? x - contentSize[0] : x;\n  const posY = y + contentSize[1] > viewSize[1] ? y - contentSize[1] : y;\n\n  return [posX, posY];\n};\n"],"names":["getTooltipPosition","data","point","size","x","y","contentSize","viewSize","posX","posY"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,OAAO,MAAMA,qBAAyD,CAAC,GAAGC;IACxE,MAAMC,QAAQD,IAAI,CAAC,EAAE;IACrB,MAAME,OAAOF,IAAI,CAAC,EAAE;IAEpB,2CAA2C;IAC3C,MAAM,CAACG,GAAGC,EAAE,GAAGH;IACf,MAAM,EAAEI,WAAW,EAAEC,QAAQ,EAAE,GAAGJ;IAElC,MAAMK,OAAOJ,IAAIE,WAAW,CAAC,EAAE,GAAGC,QAAQ,CAAC,EAAE,GAAGH,IAAIE,WAAW,CAAC,EAAE,GAAGF;IACrE,MAAMK,OAAOJ,IAAIC,WAAW,CAAC,EAAE,GAAGC,QAAQ,CAAC,EAAE,GAAGF,IAAIC,WAAW,CAAC,EAAE,GAAGD;IAErE,OAAO;QAACG;QAAMC;KAAK;AACrB,EAAE"}

package/dist/Table/InnerTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InnerTable.d.ts","sourceRoot":"","sources":["../../src/Table/InnerTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,UAAU,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,KAAK,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG;IACnD,OAAO,EAAE,YAAY,CAAC;CACvB,CAAC;AAOF,eAAO,MAAM,UAAU,2HAerB,CAAC"}
+{"version":3,"file":"InnerTable.d.ts","sourceRoot":"","sources":["../../src/Table/InnerTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,UAAU,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,KAAK,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG;IACnD,OAAO,EAAE,YAAY,CAAC;CACvB,CAAC;AAQF,eAAO,MAAM,UAAU,2HAerB,CAAC"}

package/dist/Table/InnerTable.js

@@ -21,7 +21,8 @@ const StyledMuiTable = styled(MuiTable)(({ theme })=>({
     }));
 const TABLE_DENSITY_CONFIG = {
     compact: 'small',
-    standard: 'medium'
+    standard: 'medium',
+    comfortable: 'medium'
 };
 export const InnerTable = /*#__PURE__*/ forwardRef(function InnerTable({ density, ...otherProps }, ref) {
     return /*#__PURE__*/ _jsx(StyledMuiTable, {

package/dist/Table/InnerTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/InnerTable.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 { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.default,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: '100%',\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","default","TABLE_DENSITY_CONFIG","compact","standard","InnerTable","density","otherProps","ref","tabIndex","size","sx","width"],"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,SAASC,QAAQ,EAAEC,MAAM,QAAqC,gBAAgB;AACvF,SAASC,UAAU,QAAQ,QAAQ;AAGnC,MAAMC,iBAAiBF,OAAOD,UAAU,CAAC,EAAEI,KAAK,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,aAAa;QACbC,gBAAgB;QAChBC,iBAAiBH,MAAMI,OAAO,CAACC,UAAU,CAACC,OAAO;IACnD,CAAA;AAMA,MAAMC,uBAAoE;IACxEC,SAAS;IACTC,UAAU;AACZ;AAEA,OAAO,MAAMC,2BAAaZ,WAA8C,SAASY,WAC/E,EAAEC,OAAO,EAAE,GAAGC,YAAY,EAC1BC,GAAG;IAEH,qBACE,KAACd;QACE,GAAGa,UAAU;QACdE,UAAU,CAAC;QACXC,MAAMR,oBAAoB,CAACI,QAAQ;QACnCE,KAAKA;QACLG,IAAI;YACFC,OAAO;QACT;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/Table/InnerTable.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 { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.default,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n  comfortable: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: '100%',\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","default","TABLE_DENSITY_CONFIG","compact","standard","comfortable","InnerTable","density","otherProps","ref","tabIndex","size","sx","width"],"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,SAASC,QAAQ,EAAEC,MAAM,QAAqC,gBAAgB;AACvF,SAASC,UAAU,QAAQ,QAAQ;AAGnC,MAAMC,iBAAiBF,OAAOD,UAAU,CAAC,EAAEI,KAAK,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,aAAa;QACbC,gBAAgB;QAChBC,iBAAiBH,MAAMI,OAAO,CAACC,UAAU,CAACC,OAAO;IACnD,CAAA;AAMA,MAAMC,uBAAoE;IACxEC,SAAS;IACTC,UAAU;IACVC,aAAa;AACf;AAEA,OAAO,MAAMC,2BAAab,WAA8C,SAASa,WAC/E,EAAEC,OAAO,EAAE,GAAGC,YAAY,EAC1BC,GAAG;IAEH,qBACE,KAACf;QACE,GAAGc,UAAU;QACdE,UAAU,CAAC;QACXC,MAAMT,oBAAoB,CAACK,QAAQ;QACnCE,KAAKA;QACLG,IAAI;YACFC,OAAO;QACT;;AAGN,GAAG"}

package/dist/Table/Table.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { TableProps } from './model/table-model';
 /**
  * Component used to render tabular data in Perses use cases. This component is
@@ -5,5 +6,5 @@ import { TableProps } from './model/table-model';
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
  */
-export declare function Table<TableData>({ data, columns, density, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId, rowSelection, sorting, rowSelectionVariant, ...otherProps }: TableProps<TableData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TableData>({ data, columns, cellConfigs, density, defaultColumnWidth, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId, rowSelection, sorting, rowSelectionVariant, ...otherProps }: TableProps<TableData>): ReactElement;
 //# sourceMappingURL=Table.d.ts.map

package/dist/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,UAAU,EAAkC,MAAM,qBAAqB,CAAC;AAYjF;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,OAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,QAA6B,EAC7B,YAAoC,EACpC,OAAyB,EACzB,mBAAgC,EAChC,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,SAAS,CAAC,2CA+HvB"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,UAAU,EAAwD,MAAM,qBAAqB,CAAC;AAYvG;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAoB,EACpB,kBAAyC,EACzC,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,QAA6B,EAC7B,YAAoC,EACpC,OAAyB,EACzB,mBAAgC,EAChC,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,YAAY,CAiItC"}

package/dist/Table/Table.js

@@ -16,7 +16,7 @@ import { useTheme } from '@mui/material';
 import { useCallback, useMemo } from 'react';
 import { VirtualizedTable } from './VirtualizedTable';
 import { TableCheckbox } from './TableCheckbox';
-import { persesColumnsToTanstackColumns } from './model/table-model';
+import { persesColumnsToTanstackColumns, DEFAULT_COLUMN_WIDTH } from './model/table-model';
 const DEFAULT_GET_ROW_ID = (data, index)=>{
     return `${index}`;
 };
@@ -30,11 +30,11 @@ const DEFAULT_SORTING = [];
  * **not** intended to be a general use data table for use cases unrelated to Perses.
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
- */ export function Table({ data, columns, density = 'standard', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
+ */ export function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = DEFAULT_COLUMN_WIDTH, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
     const theme = useTheme();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
-        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
+        onRowSelectionChange?.(newRowSelection);
     };
     const handleRowSelectionEvent = useCallback((table, row, isModified)=>{
         if (rowSelectionVariant === 'standard' || isModified) {
@@ -48,7 +48,7 @@ const DEFAULT_SORTING = [];
                 table.toggleAllRowsSelected();
             } else {
                 // Focus the selected row.
-                onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange({
+                onRowSelectionChange?.({
                     [row.id]: true
                 });
             }
@@ -59,14 +59,14 @@ const DEFAULT_SORTING = [];
     ]);
     const handleCheckboxChange = useCallback((e, table, row)=>{
         const nativePointerEvent = e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent) ? e.nativeEvent : undefined;
-        const isModifed = !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.metaKey) || !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.shiftKey);
+        const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;
         handleRowSelectionEvent(table, row, isModifed);
     }, [
         handleRowSelectionEvent
     ]);
     const handleSortingChange = (sortingUpdater)=>{
         const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
-        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
+        onSortingChange?.(newSorting);
     };
     const checkboxColumn = useMemo(()=>{
         return {
@@ -88,7 +88,7 @@ const DEFAULT_SORTING = [];
                     onChange: (e)=>{
                         handleCheckboxChange(e, table, row);
                     },
-                    color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
+                    color: getCheckboxColor?.(row.original),
                     density: density
                 });
             },
@@ -139,10 +139,12 @@ const DEFAULT_SORTING = [];
     return /*#__PURE__*/ _jsx(VirtualizedTable, {
         ...otherProps,
         density: density,
+        defaultColumnWidth: defaultColumnWidth,
         onRowClick: handleRowClick,
         rows: table.getRowModel().rows,
         columns: table.getAllFlatColumns(),
-        headers: table.getHeaderGroups()
+        headers: table.getHeaderGroups(),
+        cellConfigs: cellConfigs
     });
 }
 

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/Table.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 {\n  useReactTable,\n  getCoreRowModel,\n  ColumnDef,\n  RowSelectionState,\n  OnChangeFn,\n  Row,\n  Table as TanstackTable,\n  SortingState,\n  getSortedRowModel,\n} from '@tanstack/react-table';\nimport { useTheme } from '@mui/material';\nimport { useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number) => {\n  return `${index}`;\n};\n\n// Setting these defaults one enables them to be consistent across renders instead\n// of being recreated every time, which can be important for perf because react\n// does not do deep equality checking for objects and arrays.\nconst DEFAULT_ROW_SELECTION: NonNullable<TableProps<unknown>['rowSelection']> = {};\nconst DEFAULT_SORTING: NonNullable<TableProps<unknown>['sorting']> = [];\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  density = 'standard',\n  checkboxSelection,\n  onRowSelectionChange,\n  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  rowSelectionVariant = 'standard',\n  ...otherProps\n}: TableProps<TableData>) {\n  const theme = useTheme();\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const handleRowSelectionEvent = useCallback(\n    (table: TanstackTable<TableData>, row: Row<TableData>, isModified: boolean) => {\n      if (rowSelectionVariant === 'standard' || isModified) {\n        row.toggleSelected();\n      } else {\n        // Legend variant (when action not modified with shift/meta key).\n        // Note that this behavior needs to be kept in sync with behavior in\n        // the Legend component for list-based legends.\n        if (row.getIsSelected() && !table.getIsAllRowsSelected()) {\n          // Row was already selected. Revert to select all.\n          table.toggleAllRowsSelected();\n        } else {\n          // Focus the selected row.\n          onRowSelectionChange?.({\n            [row.id]: true,\n          });\n        }\n      }\n    },\n    [onRowSelectionChange, rowSelectionVariant]\n  );\n\n  const handleCheckboxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, table: TanstackTable<TableData>, row: Row<TableData>) => {\n      const nativePointerEvent =\n        e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)\n          ? (e.nativeEvent as PointerEvent)\n          : undefined;\n      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;\n      handleRowSelectionEvent(table, row, isModifed);\n    },\n    [handleRowSelectionEvent]\n  );\n\n  const handleSortingChange: OnChangeFn<SortingState> = (sortingUpdater) => {\n    const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;\n    onSortingChange?.(newSorting);\n  };\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }) => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row, table }) => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              handleCheckboxChange(e, table, row);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n      enableSorting: false,\n    };\n  }, [theme.palette.text.primary, density, getCheckboxColor, handleCheckboxChange]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    onSortingChange: handleSortingChange,\n    // For now, defaulting to sort by descending first. We can expose the ability\n    // to customize it if/when we have use cases for it.\n    sortDescFirst: true,\n    state: {\n      rowSelection,\n      sorting,\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, rowId: string) => {\n      const row = table.getRow(rowId);\n      const isModifiedClick = e.metaKey || e.shiftKey;\n      handleRowSelectionEvent(table, row, isModifiedClick);\n    },\n    [handleRowSelectionEvent, table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","getSortedRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","density","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","rowSelectionVariant","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","handleRowSelectionEvent","table","row","isModified","toggleSelected","getIsSelected","getIsAllRowsSelected","toggleAllRowsSelected","id","handleCheckboxChange","e","nativePointerEvent","nativeEvent","MouseEvent","KeyboardEvent","undefined","isModifed","metaKey","shiftKey","handleSortingChange","sortingUpdater","newSorting","checkboxColumn","size","header","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","cell","getIsSomeSelected","original","enableSorting","tableColumns","initTableColumns","unshift","enableRowSelection","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/Table.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 {\n  useReactTable,\n  getCoreRowModel,\n  ColumnDef,\n  RowSelectionState,\n  OnChangeFn,\n  Row,\n  Table as TanstackTable,\n  SortingState,\n  getSortedRowModel,\n} from '@tanstack/react-table';\nimport { useTheme } from '@mui/material';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns, DEFAULT_COLUMN_WIDTH } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {\n  return `${index}`;\n};\n\n// Setting these defaults one enables them to be consistent across renders instead\n// of being recreated every time, which can be important for perf because react\n// does not do deep equality checking for objects and arrays.\nconst DEFAULT_ROW_SELECTION: NonNullable<TableProps<unknown>['rowSelection']> = {};\nconst DEFAULT_SORTING: NonNullable<TableProps<unknown>['sorting']> = [];\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  cellConfigs,\n  density = 'standard',\n  defaultColumnWidth = DEFAULT_COLUMN_WIDTH,\n  checkboxSelection,\n  onRowSelectionChange,\n  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  rowSelectionVariant = 'standard',\n  ...otherProps\n}: TableProps<TableData>): ReactElement {\n  const theme = useTheme();\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const handleRowSelectionEvent = useCallback(\n    (table: TanstackTable<TableData>, row: Row<TableData>, isModified: boolean) => {\n      if (rowSelectionVariant === 'standard' || isModified) {\n        row.toggleSelected();\n      } else {\n        // Legend variant (when action not modified with shift/meta key).\n        // Note that this behavior needs to be kept in sync with behavior in\n        // the Legend component for list-based legends.\n        if (row.getIsSelected() && !table.getIsAllRowsSelected()) {\n          // Row was already selected. Revert to select all.\n          table.toggleAllRowsSelected();\n        } else {\n          // Focus the selected row.\n          onRowSelectionChange?.({\n            [row.id]: true,\n          });\n        }\n      }\n    },\n    [onRowSelectionChange, rowSelectionVariant]\n  );\n\n  const handleCheckboxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, table: TanstackTable<TableData>, row: Row<TableData>) => {\n      const nativePointerEvent =\n        e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)\n          ? (e.nativeEvent as PointerEvent)\n          : undefined;\n      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;\n      handleRowSelectionEvent(table, row, isModifed);\n    },\n    [handleRowSelectionEvent]\n  );\n\n  const handleSortingChange: OnChangeFn<SortingState> = (sortingUpdater) => {\n    const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;\n    onSortingChange?.(newSorting);\n  };\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row, table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              handleCheckboxChange(e, table, row);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n      enableSorting: false,\n    };\n  }, [theme.palette.text.primary, density, getCheckboxColor, handleCheckboxChange]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    onSortingChange: handleSortingChange,\n    // For now, defaulting to sort by descending first. We can expose the ability\n    // to customize it if/when we have use cases for it.\n    sortDescFirst: true,\n    state: {\n      rowSelection,\n      sorting,\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, rowId: string) => {\n      const row = table.getRow(rowId);\n      const isModifiedClick = e.metaKey || e.shiftKey;\n      handleRowSelectionEvent(table, row, isModifiedClick);\n    },\n    [handleRowSelectionEvent, table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      defaultColumnWidth={defaultColumnWidth}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n      cellConfigs={cellConfigs}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","getSortedRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_COLUMN_WIDTH","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","cellConfigs","density","defaultColumnWidth","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","rowSelectionVariant","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","handleRowSelectionEvent","table","row","isModified","toggleSelected","getIsSelected","getIsAllRowsSelected","toggleAllRowsSelected","id","handleCheckboxChange","e","nativePointerEvent","nativeEvent","MouseEvent","KeyboardEvent","undefined","isModifed","metaKey","shiftKey","handleSortingChange","sortingUpdater","newSorting","checkboxColumn","size","header","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","cell","getIsSomeSelected","original","enableSorting","tableColumns","initTableColumns","unshift","enableRowSelection","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups"],"mappings":"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"}

package/dist/Table/TableCell.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { TableCellProps as MuiTableCellProps } from '@mui/material';
+import { ReactElement } from 'react';
 import { TableCellAlignment, TableDensity } from './model/table-model';
 export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {
     density: TableDensity;
@@ -26,6 +26,8 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'al
      */
     focusState?: 'trigger-focus' | 'focus-next' | 'none';
     onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;
+    color?: string;
+    backgroundColor?: string;
 }
-export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, description, align, color, backgroundColor, ...otherProps }: TableCellProps): ReactElement;
 //# sourceMappingURL=TableCell.d.ts.map

package/dist/Table/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AAEtH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmB3F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IAGtB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,GAAG,UAAU,EACd,EAAE,cAAc,2CA2EhB"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmB3F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IAGtB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;IACjH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,eAAe,EACf,GAAG,UAAU,EACd,EAAE,cAAc,GAAG,YAAY,CA8F/B"}

package/dist/Table/TableCell.js

@@ -29,7 +29,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme })=>({
             borderRadius: 0
         }
     }));
-export function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }) {
+export function TableCell({ children, density, variant, width, focusState = 'none', onFocusTrigger, isFirstColumn, isLastColumn, description, align, color, backgroundColor, ...otherProps }) {
     const theme = useTheme();
     const elRef = useRef();
     const isHeader = variant === 'head';
@@ -41,9 +41,8 @@ export function TableCell({ children, density, variant, width, focusState = 'non
         focusState
     ]);
     const handleFocus = (e)=>{
-        var _e_currentTarget;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (_e_currentTarget = e.currentTarget) === null || _e_currentTarget === void 0 ? void 0 : _e_currentTarget.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
+        const nestedFocusTarget = e.currentTarget?.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
         if (nestedFocusTarget) {
             // If the cell has a focusable child, focus it instead. Mostly used for
             // checkbox cells, but could have other uses.
@@ -56,7 +55,7 @@ export function TableCell({ children, density, variant, width, focusState = 'non
         // 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);
+        onFocusTrigger?.(e);
     };
     return /*#__PURE__*/ _jsx(StyledMuiTableCell, {
         ...otherProps,
@@ -68,12 +67,29 @@ export function TableCell({ children, density, variant, width, focusState = 'non
         onFocus: handleFocus,
         onClick: handleInteractionFocusTrigger,
         onKeyUp: handleInteractionFocusTrigger,
+        style: {
+            width: width
+        },
         sx: {
-            width: width,
-            borderBottom: isHeader ? (theme)=>`solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`
+            position: 'relative',
+            borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,
+            '&:hover #original-cell': {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 10,
+                width: 'fit-content',
+                minWidth: '100%',
+                whiteSpace: 'nowrap',
+                overflow: 'visible',
+                backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,
+                outline: `solid 1px ${theme.palette.info.main}`,
+                outlineOffset: '-1px'
+            }
         },
         ref: elRef,
         children: /*#__PURE__*/ _jsx(Box, {
+            id: "original-cell",
             sx: {
                 ...getTableCellLayout(theme, density, {
                     isLastColumn,
@@ -90,7 +106,13 @@ export function TableCell({ children, density, variant, width, focusState = 'non
                 // in headers.
                 flexDirection: 'inherit'
             },
+            style: {
+                backgroundColor: backgroundColor ?? 'inherit',
+                color: color ?? 'inherit'
+            },
             title: description,
+            "aria-label": description,
+            textAlign: align,
             children: children
         })
     });

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.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 { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        title={description}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow","flexDirection","title"],"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,aAAaC,YAAY,EAAEC,MAAM,EAAuCC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AACtH,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAQ;AAC1C,SAA2CC,kBAAkB,QAAQ,sBAAsB;AAE3F,MAAMC,qBAAqBN,OAAOD,cAAc,CAAC,EAAEQ,KAAK,EAAE,GAAM,CAAA;QAC9DC,SAAS;QACTC,iBAAiB;QAEjB,uBAAuB;YACrB,kEAAkE;YAClEA,iBAAiBF,MAAMG,OAAO,CAACC,UAAU,CAACC,OAAO;QACnD;QACA,mBAAmB;YACjBC,SAAS,CAAC,UAAU,EAAEN,MAAMG,OAAO,CAACI,OAAO,CAACC,IAAI,CAAC,CAAC;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,eAAe;YACfC,cAAc;QAChB;IACF,CAAA;AAkCA,OAAO,SAASnB,UAAU,EACxBoB,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,aAAa,MAAM,EACnBC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,WAAW,EACX,GAAGC,YACY;IACf,MAAMpB,QAAQL;IAEd,MAAM0B,QAAQxB;IAEd,MAAMyB,WAAWT,YAAY;IAE7BjB,UAAU;QACR,IAAImB,eAAe,mBAAmBM,MAAME,OAAO,EAAE;YACnDF,MAAME,OAAO,CAACC,KAAK;QACrB;IACF,GAAG;QAACT;KAAW;IAEf,MAAMU,cAA6D,CAACC;YAExCA;QAD1B,4DAA4D;QAC5D,MAAMC,qBAAoBD,mBAAAA,EAAEE,aAAa,cAAfF,uCAAAA,iBAAiBG,aAAa,CACtD;QAEF,IAAIF,mBAAmB;YACrB,uEAAuE;YACvE,6CAA6C;YAC7CA,kBAAkBH,KAAK;QACzB;IACF;IAEA,MAAMM,gCAAkE,CAACJ;QACvE,wEAAwE;QACxE,uEAAuE;QACvE,iEAAiE;QACjE,yEAAyE;QACzE,0CAA0C;QAC1CV,2BAAAA,qCAAAA,eAAiBU;IACnB;IAEA,qBACE,KAAC3B;QACE,GAAGqB,UAAU;QACd,2EAA2E;QAC3E,wEAAwE;QACxE,qEAAqE;QACrE,QAAQ;QACRW,UAAUhB,eAAe,SAAS,IAAI,CAAC;QACvCiB,SAASP;QACTQ,SAASH;QACTI,SAASJ;QACTK,IAAI;YACFrB,OAAOA;YACPsB,cAAcd,WACV,CAACtB,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACkC,IAAI,CAAC,IAAI,CAAC,CAAC,GACjD,CAAC,UAAU,EAAErC,MAAMG,OAAO,CAACkC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3C;QACAC,KAAKjB;kBAEL,cAAA,KAAC3B;YACCyC,IAAI;gBACF,GAAGrC,mBAAmBE,OAAOY,SAAS;oBAAEM;oBAAcD;gBAAc,EAAE;gBACtEsB,UAAU;gBAEV,mEAAmE;gBACnE,mDAAmD;gBACnDC,YAAY;gBACZC,UAAU;gBACVC,cAAc;gBAEd,uEAAuE;gBACvE,uEAAuE;gBACvE,cAAc;gBACdC,eAAe;YACjB;YACAC,OAAOzB;sBAENR;;;AAIT"}
+{"version":3,"sources":["../../src/Table/TableCell.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 { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { ReactElement, useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n  color?: string;\n  backgroundColor?: string;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  align,\n  color,\n  backgroundColor,\n  ...otherProps\n}: TableCellProps): ReactElement {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      style={{ width: width }}\n      sx={{\n        position: 'relative',\n        borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,\n        '&:hover #original-cell': {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          zIndex: 10,\n          width: 'fit-content',\n          minWidth: '100%',\n          whiteSpace: 'nowrap',\n          overflow: 'visible',\n          backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,\n          outline: `solid 1px ${theme.palette.info.main}`,\n          outlineOffset: '-1px',\n        },\n      }}\n      ref={elRef}\n    >\n      <Box\n        id=\"original-cell\"\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        style={{\n          backgroundColor: backgroundColor ?? 'inherit',\n          color: color ?? 'inherit',\n        }}\n        title={description}\n        aria-label={description}\n        textAlign={align}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","align","color","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","style","sx","position","borderBottom","grey","top","left","zIndex","minWidth","whiteSpace","overflow","info","ref","id","textOverflow","flexDirection","title","aria-label","textAlign"],"mappings":"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"}

package/dist/Table/TableCheckbox.d.ts

@@ -1,8 +1,9 @@
 import { CheckboxProps } from '@mui/material';
+import { ReactElement } from 'react';
 import { TableDensity } from './model/table-model';
 export interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {
     color?: string;
     density: TableDensity;
 }
-export declare function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps): ReactElement;
 //# sourceMappingURL=TableCheckbox.d.ts.map