@perses-dev/components 0.56.0-beta.0 → 0.56.0-beta.1

package/dist/FormEditor/form-editor-handle.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Imperative handle exposed by editor forms, allowing their parent to request closing them, e.g. when the user clicks
+ * outside of the Drawer containing the form. The form is responsible for closing itself, after asking for confirmation
+ * if there are unsaved changes.
+ */
+export interface FormEditorHandle {
+    requestClose: () => void;
+}
+//# sourceMappingURL=form-editor-handle.d.ts.map

package/dist/FormEditor/form-editor-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-editor-handle.d.ts","sourceRoot":"","sources":["../../src/FormEditor/form-editor-handle.ts"],"names":[],"mappings":"AAaA;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B"}

package/dist/FormEditor/form-editor-handle.js

@@ -0,0 +1,19 @@
+// Copyright 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.
+/**
+ * Imperative handle exposed by editor forms, allowing their parent to request closing them, e.g. when the user clicks
+ * outside of the Drawer containing the form. The form is responsible for closing itself, after asking for confirmation
+ * if there are unsaved changes.
+ */ export { };
+
+//# sourceMappingURL=form-editor-handle.js.map

package/dist/FormEditor/form-editor-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FormEditor/form-editor-handle.ts"],"sourcesContent":["// Copyright 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\n/**\n * Imperative handle exposed by editor forms, allowing their parent to request closing them, e.g. when the user clicks\n * outside of the Drawer containing the form. The form is responsible for closing itself, after asking for confirmation\n * if there are unsaved changes.\n */\nexport interface FormEditorHandle {\n  requestClose: () => void;\n}\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;;;;CAIC,GACD,WAEC"}

package/dist/FormEditor/index.d.ts

@@ -1,2 +1,3 @@
 export * from './FormActions';
+export * from './form-editor-handle';
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/FormEditor/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from "./FormActions.js";
+export * from "./form-editor-handle.js";
 
 //# sourceMappingURL=index.js.map

package/dist/FormEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/index.ts"],"sourcesContent":["// Copyright 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 './FormActions';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAgB"}
+{"version":3,"sources":["../../src/FormEditor/index.ts"],"sourcesContent":["// Copyright 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 './FormActions';\nexport * from './form-editor-handle';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAgB;AAC9B,cAAc,0BAAuB"}

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,KAAK,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAoBtF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAGtC,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;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,mBAAmB,EACnB,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,eAAe,EACf,QAAQ,EACR,sBAAsB,EACtB,GAAG,UAAU,EACd,EAAE,cAAc,GAAG,YAAY,CAiH/B"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAoBtF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAGtC,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;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,mBAAmB,EACnB,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,eAAe,EACf,QAAQ,EACR,sBAAsB,EACtB,GAAG,UAAU,EACd,EAAE,cAAc,GAAG,YAAY,CAmH/B"}

package/dist/Table/TableCell.js

@@ -15,6 +15,7 @@ import { c as _c } from "react-compiler-runtime";
 import { Box, Link, TableCell as MuiTableCell, styled, useTheme } from "@mui/material";
 import { useEffect, useRef } from "react";
 import { hasDataFieldPatterns, replaceDataFields } from "../utils/data-field-interpolation.js";
+import { sanitizeUrl } from "../utils/url.js";
 import { getTableCellLayout } from "./model/table-model.js";
 const StyledMuiTableCell = styled(MuiTableCell)(({ theme })=>({
         padding: 0,
@@ -32,7 +33,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme })=>({
         }
     }));
 export function TableCell(t0) {
-    const $ = _c(64);
+    const $ = _c(66);
     let adjacentCellsValuesMap;
     let align;
     let backgroundColor;
@@ -127,53 +128,65 @@ export function TableCell(t0) {
             t5 = undefined;
             break bb0;
         }
-        if (adjacentCellsValuesMap && hasDataFieldPatterns(dataLink.url)) {
+        let url = dataLink.url;
+        if (adjacentCellsValuesMap && hasDataFieldPatterns(url)) {
             let t6;
-            if ($[22] !== adjacentCellsValuesMap || $[23] !== dataLink.url) {
-                t6 = replaceDataFields(dataLink.url, adjacentCellsValuesMap, {
+            if ($[22] !== adjacentCellsValuesMap || $[23] !== url) {
+                t6 = replaceDataFields(url, adjacentCellsValuesMap, {
                     urlEncode: true
                 });
                 $[22] = adjacentCellsValuesMap;
-                $[23] = dataLink.url;
+                $[23] = url;
                 $[24] = t6;
             } else {
                 t6 = $[24];
             }
-            const { text } = t6;
-            let t7;
-            if ($[25] !== dataLink || $[26] !== text) {
-                t7 = {
-                    ...dataLink,
-                    url: text
-                };
-                $[25] = dataLink;
-                $[26] = text;
-                $[27] = t7;
-            } else {
-                t7 = $[27];
-            }
-            t5 = t7;
+            url = t6.text;
+        }
+        let t6;
+        if ($[25] !== url) {
+            t6 = sanitizeUrl(url);
+            $[25] = url;
+            $[26] = t6;
+        } else {
+            t6 = $[26];
+        }
+        const safeUrl = t6;
+        if (safeUrl === undefined) {
+            t5 = undefined;
             break bb0;
         }
-        t5 = dataLink;
+        let t7;
+        if ($[27] !== dataLink || $[28] !== safeUrl) {
+            t7 = {
+                ...dataLink,
+                url: safeUrl
+            };
+            $[27] = dataLink;
+            $[28] = safeUrl;
+            $[29] = t7;
+        } else {
+            t7 = $[29];
+        }
+        t5 = t7;
     }
     const modifiedDataLink = t5;
     const t6 = focusState !== "none" ? 0 : -1;
     let t7;
-    if ($[28] !== width) {
+    if ($[30] !== width) {
         t7 = {
             width
         };
-        $[28] = width;
-        $[29] = t7;
+        $[30] = width;
+        $[31] = t7;
     } else {
-        t7 = $[29];
+        t7 = $[31];
     }
     const t8 = isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`;
     const t9 = `${backgroundColor ?? theme.palette.background.default} !important`;
     const t10 = `solid 1px ${theme.palette.info.main}`;
     let t11;
-    if ($[30] !== t10 || $[31] !== t9) {
+    if ($[32] !== t10 || $[33] !== t9) {
         t11 = {
             position: "absolute",
             top: 0,
@@ -187,45 +200,45 @@ export function TableCell(t0) {
             outline: t10,
             outlineOffset: "-1px"
         };
-        $[30] = t10;
-        $[31] = t9;
-        $[32] = t11;
+        $[32] = t10;
+        $[33] = t9;
+        $[34] = t11;
     } else {
-        t11 = $[32];
+        t11 = $[34];
     }
     let t12;
-    if ($[33] !== t11 || $[34] !== t8) {
+    if ($[35] !== t11 || $[36] !== t8) {
         t12 = {
             position: "relative",
             borderBottom: t8,
             "&:hover #original-cell": t11
         };
-        $[33] = t11;
-        $[34] = t8;
-        $[35] = t12;
+        $[35] = t11;
+        $[36] = t8;
+        $[37] = t12;
     } else {
-        t12 = $[35];
+        t12 = $[37];
     }
     let t13;
-    if ($[36] !== defaultColumnHeight || $[37] !== density || $[38] !== isFirstColumn || $[39] !== isHeader || $[40] !== isLastColumn || $[41] !== theme) {
+    if ($[38] !== defaultColumnHeight || $[39] !== density || $[40] !== isFirstColumn || $[41] !== isHeader || $[42] !== isLastColumn || $[43] !== theme) {
         t13 = getTableCellLayout(theme, density, {
             isHeader,
             isLastColumn,
             isFirstColumn,
             defaultColumnHeight
         });
-        $[36] = defaultColumnHeight;
-        $[37] = density;
-        $[38] = isFirstColumn;
-        $[39] = isHeader;
-        $[40] = isLastColumn;
-        $[41] = theme;
-        $[42] = t13;
+        $[38] = defaultColumnHeight;
+        $[39] = density;
+        $[40] = isFirstColumn;
+        $[41] = isHeader;
+        $[42] = isLastColumn;
+        $[43] = theme;
+        $[44] = t13;
     } else {
-        t13 = $[42];
+        t13 = $[44];
     }
     let t14;
-    if ($[43] !== t13) {
+    if ($[45] !== t13) {
         t14 = {
             ...t13,
             position: "relative",
@@ -234,41 +247,41 @@ export function TableCell(t0) {
             textOverflow: "ellipsis",
             flexDirection: "inherit"
         };
-        $[43] = t13;
-        $[44] = t14;
+        $[45] = t13;
+        $[46] = t14;
     } else {
-        t14 = $[44];
+        t14 = $[46];
     }
     const t15 = backgroundColor ?? "inherit";
     const t16 = color ?? "inherit";
     let t17;
-    if ($[45] !== t15 || $[46] !== t16) {
+    if ($[47] !== t15 || $[48] !== t16) {
         t17 = {
             backgroundColor: t15,
             color: t16
         };
-        $[45] = t15;
-        $[46] = t16;
-        $[47] = t17;
+        $[47] = t15;
+        $[48] = t16;
+        $[49] = t17;
     } else {
-        t17 = $[47];
+        t17 = $[49];
     }
     let t18;
-    if ($[48] !== children || $[49] !== modifiedDataLink) {
+    if ($[50] !== children || $[51] !== modifiedDataLink) {
         t18 = modifiedDataLink ? /*#__PURE__*/ _jsx(Link, {
             href: modifiedDataLink.url,
             target: modifiedDataLink.targetBlank ? "_blank" : "_self",
             rel: modifiedDataLink.targetBlank ? "noopener noreferrer" : undefined,
             children: children
         }) : children;
-        $[48] = children;
-        $[49] = modifiedDataLink;
-        $[50] = t18;
+        $[50] = children;
+        $[51] = modifiedDataLink;
+        $[52] = t18;
     } else {
-        t18 = $[50];
+        t18 = $[52];
     }
     let t19;
-    if ($[51] !== align || $[52] !== description || $[53] !== t14 || $[54] !== t17 || $[55] !== t18) {
+    if ($[53] !== align || $[54] !== description || $[55] !== t14 || $[56] !== t17 || $[57] !== t18) {
         t19 = /*#__PURE__*/ _jsx(Box, {
             id: "original-cell",
             sx: t14,
@@ -278,17 +291,17 @@ export function TableCell(t0) {
             textAlign: align,
             children: t18
         });
-        $[51] = align;
-        $[52] = description;
-        $[53] = t14;
-        $[54] = t17;
-        $[55] = t18;
-        $[56] = t19;
+        $[53] = align;
+        $[54] = description;
+        $[55] = t14;
+        $[56] = t17;
+        $[57] = t18;
+        $[58] = t19;
     } else {
-        t19 = $[56];
+        t19 = $[58];
     }
     let t20;
-    if ($[57] !== handleInteractionFocusTrigger || $[58] !== otherProps || $[59] !== t12 || $[60] !== t19 || $[61] !== t6 || $[62] !== t7) {
+    if ($[59] !== handleInteractionFocusTrigger || $[60] !== otherProps || $[61] !== t12 || $[62] !== t19 || $[63] !== t6 || $[64] !== t7) {
         t20 = /*#__PURE__*/ _jsx(StyledMuiTableCell, {
             ...otherProps,
             tabIndex: t6,
@@ -300,15 +313,15 @@ export function TableCell(t0) {
             ref: elRef,
             children: t19
         });
-        $[57] = handleInteractionFocusTrigger;
-        $[58] = otherProps;
-        $[59] = t12;
-        $[60] = t19;
-        $[61] = t6;
-        $[62] = t7;
-        $[63] = t20;
+        $[59] = handleInteractionFocusTrigger;
+        $[60] = otherProps;
+        $[61] = t12;
+        $[62] = t19;
+        $[63] = t6;
+        $[64] = t7;
+        $[65] = t20;
     } else {
-        t20 = $[63];
+        t20 = $[65];
     }
     return t20;
 }

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 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 type { TableCellProps as MuiTableCellProps } from '@mui/material';\nimport { Box, Link, TableCell as MuiTableCell, styled, useTheme } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { hasDataFieldPatterns, replaceDataFields } from '../utils/data-field-interpolation';\nimport type { DataLink, TableCellAlignment, TableDensity } from './model/table-model';\nimport { 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  defaultColumnHeight?: 'auto' | number;\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  dataLink?: DataLink;\n  adjacentCellsValuesMap?: Record<string, string>;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  defaultColumnHeight,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  align,\n  color,\n  backgroundColor,\n  dataLink,\n  adjacentCellsValuesMap,\n  ...otherProps\n}: TableCellProps): ReactElement {\n  const theme = useTheme();\n  const elRef = useRef<HTMLTableCellElement>(null);\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  const modifiedDataLink = useMemo((): DataLink | undefined => {\n    if (!dataLink) return undefined;\n\n    if (adjacentCellsValuesMap && hasDataFieldPatterns(dataLink.url)) {\n      const { text } = replaceDataFields(dataLink.url, adjacentCellsValuesMap, { urlEncode: true });\n      return { ...dataLink, url: text };\n    }\n    return dataLink;\n  }, [dataLink, adjacentCellsValuesMap]);\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, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }),\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        {modifiedDataLink ? (\n          <Link\n            href={modifiedDataLink.url}\n            target={modifiedDataLink.targetBlank ? '_blank' : '_self'}\n            rel={modifiedDataLink.targetBlank ? 'noopener noreferrer' : undefined}\n          >\n            {children}\n          </Link>\n        ) : (\n          children\n        )}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["Box","Link","TableCell","MuiTableCell","styled","useTheme","useEffect","useRef","hasDataFieldPatterns","replaceDataFields","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,GAAG,EAAEC,IAAI,EAAEC,aAAaC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AAEvF,SAASC,SAAS,EAAWC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,oBAAoB,EAAEC,iBAAiB,QAAQ,uCAAoC;AAE5F,SAASC,kBAAkB,QAAQ,yBAAsB;AAEzD,MAAMC,qBAAqBP,OAAOD,cAAc,CAAC,EAAES,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,EAAE;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,eAAe;YACfC,cAAc;QAChB;IACF,CAAA;AAuCA,OAAO"}
+{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 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 type { TableCellProps as MuiTableCellProps } from '@mui/material';\nimport { Box, Link, TableCell as MuiTableCell, styled, useTheme } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { hasDataFieldPatterns, replaceDataFields } from '../utils/data-field-interpolation';\nimport { sanitizeUrl } from '../utils/url';\nimport type { DataLink, TableCellAlignment, TableDensity } from './model/table-model';\nimport { 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  defaultColumnHeight?: 'auto' | number;\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  dataLink?: DataLink;\n  adjacentCellsValuesMap?: Record<string, string>;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  defaultColumnHeight,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  align,\n  color,\n  backgroundColor,\n  dataLink,\n  adjacentCellsValuesMap,\n  ...otherProps\n}: TableCellProps): ReactElement {\n  const theme = useTheme();\n  const elRef = useRef<HTMLTableCellElement>(null);\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  const modifiedDataLink = useMemo((): DataLink | undefined => {\n    if (!dataLink) return undefined;\n\n    let url = dataLink.url;\n    if (adjacentCellsValuesMap && hasDataFieldPatterns(url)) {\n      url = replaceDataFields(url, adjacentCellsValuesMap, { urlEncode: true }).text;\n    }\n    const safeUrl = sanitizeUrl(url);\n    if (safeUrl === undefined) return undefined;\n    return { ...dataLink, url: safeUrl };\n  }, [dataLink, adjacentCellsValuesMap]);\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, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }),\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        {modifiedDataLink ? (\n          <Link\n            href={modifiedDataLink.url}\n            target={modifiedDataLink.targetBlank ? '_blank' : '_self'}\n            rel={modifiedDataLink.targetBlank ? 'noopener noreferrer' : undefined}\n          >\n            {children}\n          </Link>\n        ) : (\n          children\n        )}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["Box","Link","TableCell","MuiTableCell","styled","useTheme","useEffect","useRef","hasDataFieldPatterns","replaceDataFields","sanitizeUrl","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,GAAG,EAAEC,IAAI,EAAEC,aAAaC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AAEvF,SAASC,SAAS,EAAWC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,oBAAoB,EAAEC,iBAAiB,QAAQ,uCAAoC;AAC5F,SAASC,WAAW,QAAQ,kBAAe;AAE3C,SAASC,kBAAkB,QAAQ,yBAAsB;AAEzD,MAAMC,qBAAqBR,OAAOD,cAAc,CAAC,EAAEU,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,EAAE;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,eAAe;YACfC,cAAc;QAChB;IACF,CAAA;AAuCA,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ1G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,SAAS,OAAO,IAAI,QAAQ,CACrE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,aAAa,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC;IAC1G;;;;OAIG;IACH,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,SAAS,OAAO,EAAE,EAC1D,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,KAAK,EACL,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CA8RjD"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ1G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA2DxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,SAAS,OAAO,IAAI,QAAQ,CACrE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,aAAa,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC;IAC1G;;;;OAIG;IACH,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,SAAS,OAAO,EAAE,EAC1D,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,KAAK,EACL,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAwPjD"}