@red-hat-developer-hub/backstage-plugin-intelligent-assistant 5.0.0 → 5.0.2

package/dist/components/notebooks/FileListItem.esm.js

@@ -1,58 +1,35 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyles } from '@material-ui/core/styles';
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import { TimesIcon } from '@patternfly/react-icons';
 import { FileTypeIcon } from './FileTypeIcon.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    display: "flex",
-    alignItems: "center",
-    padding: "8px 12px",
-    borderRadius: 8,
-    border: "1px solid var(--pf-t--global--border--color--default)",
-    backgroundColor: "var(--pf-t--global--background--color--secondary--default)",
-    marginBottom: 8,
-    "&:last-child": {
-      marginBottom: 0
-    }
-  },
-  fileInfo: {
-    display: "flex",
-    alignItems: "center",
-    flex: 1,
-    minWidth: 0,
-    gap: 12
-  },
-  fileName: {
-    flex: 1,
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontSize: "0.875rem"
-  },
-  fileSize: {
-    color: theme.palette.text.secondary,
-    fontSize: "0.75rem",
-    flexShrink: 0,
-    marginRight: 8
-  },
-  removeButton: {
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    padding: 4,
-    color: "var(--pf-t--global--icon--color--subtle)",
-    "&:hover": {
-      color: "var(--pf-t--global--icon--color--regular)"
-    },
-    display: "inline-flex",
-    alignItems: "center",
-    fontFamily: "inherit"
+const Container = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  padding: "8px 12px",
+  borderRadius: 8,
+  border: "1px solid var(--pf-t--global--border--color--default)",
+  backgroundColor: "var(--pf-t--global--background--color--secondary--default)",
+  marginBottom: 8,
+  "&:last-child": {
+    marginBottom: 0
   }
-}));
+});
+const RemoveButton = styled("button")({
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: 4,
+  color: "var(--pf-t--global--icon--color--subtle)",
+  "&:hover": {
+    color: "var(--pf-t--global--icon--color--regular)"
+  },
+  display: "inline-flex",
+  alignItems: "center",
+  fontFamily: "inherit"
+});
 const formatFileSize = (bytes) => {
   if (bytes === 0) return "0 B";
   const k = 1024;
@@ -75,19 +52,54 @@ const FileListItem = ({
   onRemove,
   removeAriaLabel = "Remove file"
 }) => {
-  const classes = useStyles();
   const displayName = truncateFileName(file.name, MAX_FILENAME_LENGTH);
-  return /* @__PURE__ */ jsxs(Box, { className: classes.container, children: [
-    /* @__PURE__ */ jsxs(Box, { className: classes.fileInfo, children: [
-      /* @__PURE__ */ jsx(FileTypeIcon, { fileName: file.name }),
-      /* @__PURE__ */ jsx(Typography, { className: classes.fileName, title: file.name, children: displayName })
-    ] }),
-    /* @__PURE__ */ jsx(Typography, { className: classes.fileSize, children: formatFileSize(file.size) }),
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          flex: 1,
+          minWidth: 0,
+          gap: 1.5
+        },
+        children: [
+          /* @__PURE__ */ jsx(FileTypeIcon, { fileName: file.name }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              title: file.name,
+              sx: {
+                flex: 1,
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontSize: "0.875rem"
+              },
+              children: displayName
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          color: "text.secondary",
+          fontSize: "0.75rem",
+          flexShrink: 0,
+          mr: 1
+        },
+        children: formatFileSize(file.size)
+      }
+    ),
     /* @__PURE__ */ jsx(
-      "button",
+      RemoveButton,
       {
         type: "button",
-        className: classes.removeButton,
         onClick: onRemove,
         "aria-label": removeAriaLabel,
         children: /* @__PURE__ */ jsx(TimesIcon, { style: { width: 12, height: 12 } })

package/dist/components/notebooks/FileListItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileListItem.esm.js","sources":["../../../src/components/notebooks/FileListItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { TimesIcon } from '@patternfly/react-icons';\n\nimport { FileTypeIcon } from './FileTypeIcon';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '8px 12px',\n    borderRadius: 8,\n    border: '1px solid var(--pf-t--global--border--color--default)',\n    backgroundColor:\n      'var(--pf-t--global--background--color--secondary--default)',\n    marginBottom: 8,\n    '&:last-child': {\n      marginBottom: 0,\n    },\n  },\n  fileInfo: {\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    minWidth: 0,\n    gap: 12,\n  },\n  fileName: {\n    flex: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    fontSize: '0.875rem',\n  },\n  fileSize: {\n    color: theme.palette.text.secondary,\n    fontSize: '0.75rem',\n    flexShrink: 0,\n    marginRight: 8,\n  },\n  removeButton: {\n    background: 'none',\n    border: 'none',\n    cursor: 'pointer',\n    padding: 4,\n    color: 'var(--pf-t--global--icon--color--subtle)',\n    '&:hover': {\n      color: 'var(--pf-t--global--icon--color--regular)',\n    },\n    display: 'inline-flex',\n    alignItems: 'center',\n    fontFamily: 'inherit',\n  },\n}));\n\ntype FileListItemProps = {\n  file: File;\n  onRemove: () => void;\n  removeAriaLabel?: string;\n};\n\nconst formatFileSize = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\n};\n\nconst MAX_FILENAME_LENGTH = 30;\n\nconst truncateFileName = (fileName: string, maxLength: number): string => {\n  if (fileName.length <= maxLength) return fileName;\n\n  const lastDot = fileName.lastIndexOf('.');\n  const extension = lastDot >= 0 ? fileName.slice(lastDot) : '';\n  const baseName = lastDot >= 0 ? fileName.slice(0, lastDot) : fileName;\n\n  const availableLength = maxLength - extension.length - 3;\n  if (availableLength <= 0) return fileName;\n\n  return `${baseName.slice(0, availableLength)}...${extension}`;\n};\n\nexport const FileListItem = ({\n  file,\n  onRemove,\n  removeAriaLabel = 'Remove file',\n}: FileListItemProps) => {\n  const classes = useStyles();\n  const displayName = truncateFileName(file.name, MAX_FILENAME_LENGTH);\n\n  return (\n    <Box className={classes.container}>\n      <Box className={classes.fileInfo}>\n        <FileTypeIcon fileName={file.name} />\n        <Typography className={classes.fileName} title={file.name}>\n          {displayName}\n        </Typography>\n      </Box>\n      <Typography className={classes.fileSize}>\n        {formatFileSize(file.size)}\n      </Typography>\n      <button\n        type=\"button\"\n        className={classes.removeButton}\n        onClick={onRemove}\n        aria-label={removeAriaLabel}\n      >\n        <TimesIcon style={{ width: 12, height: 12 }} />\n      </button>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileListItem.esm.js","sources":["../../../src/components/notebooks/FileListItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport { TimesIcon } from '@patternfly/react-icons';\n\nimport { FileTypeIcon } from './FileTypeIcon';\n\nconst Container = styled(Box)({\n  display: 'flex',\n  alignItems: 'center',\n  padding: '8px 12px',\n  borderRadius: 8,\n  border: '1px solid var(--pf-t--global--border--color--default)',\n  backgroundColor: 'var(--pf-t--global--background--color--secondary--default)',\n  marginBottom: 8,\n  '&:last-child': {\n    marginBottom: 0,\n  },\n});\n\nconst RemoveButton = styled('button')({\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  padding: 4,\n  color: 'var(--pf-t--global--icon--color--subtle)',\n  '&:hover': {\n    color: 'var(--pf-t--global--icon--color--regular)',\n  },\n  display: 'inline-flex',\n  alignItems: 'center',\n  fontFamily: 'inherit',\n});\n\ntype FileListItemProps = {\n  file: File;\n  onRemove: () => void;\n  removeAriaLabel?: string;\n};\n\nconst formatFileSize = (bytes: number): string => {\n  if (bytes === 0) return '0 B';\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\n};\n\nconst MAX_FILENAME_LENGTH = 30;\n\nconst truncateFileName = (fileName: string, maxLength: number): string => {\n  if (fileName.length <= maxLength) return fileName;\n\n  const lastDot = fileName.lastIndexOf('.');\n  const extension = lastDot >= 0 ? fileName.slice(lastDot) : '';\n  const baseName = lastDot >= 0 ? fileName.slice(0, lastDot) : fileName;\n\n  const availableLength = maxLength - extension.length - 3;\n  if (availableLength <= 0) return fileName;\n\n  return `${baseName.slice(0, availableLength)}...${extension}`;\n};\n\nexport const FileListItem = ({\n  file,\n  onRemove,\n  removeAriaLabel = 'Remove file',\n}: FileListItemProps) => {\n  const displayName = truncateFileName(file.name, MAX_FILENAME_LENGTH);\n\n  return (\n    <Container>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          flex: 1,\n          minWidth: 0,\n          gap: 1.5,\n        }}\n      >\n        <FileTypeIcon fileName={file.name} />\n        <Typography\n          title={file.name}\n          sx={{\n            flex: 1,\n            minWidth: 0,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n            fontSize: '0.875rem',\n          }}\n        >\n          {displayName}\n        </Typography>\n      </Box>\n      <Typography\n        sx={{\n          color: 'text.secondary',\n          fontSize: '0.75rem',\n          flexShrink: 0,\n          mr: 1,\n        }}\n      >\n        {formatFileSize(file.size)}\n      </Typography>\n      <RemoveButton\n        type=\"button\"\n        onClick={onRemove}\n        aria-label={removeAriaLabel}\n      >\n        <TimesIcon style={{ width: 12, height: 12 }} />\n      </RemoveButton>\n    </Container>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/notebooks/FileTypeIcon.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { makeStyles } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
 
 const FILE_TYPE_COLORS = {
   pdf: "#C9190B",
@@ -18,41 +18,31 @@ const FILE_TYPE_COLORS = {
   pptx: "#C9190B"
 };
 const DEFAULT_COLOR = "#6A6E73";
-const useStyles = makeStyles(() => ({
-  badge: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    minWidth: 28,
-    height: 22,
-    padding: "0 4px",
-    borderRadius: 4,
-    border: "1.5px solid",
-    fontSize: "0.625rem",
-    fontWeight: 700,
-    textTransform: "uppercase",
-    lineHeight: 1,
-    flexShrink: 0
-  }
-}));
+const Badge = styled("span")({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: 28,
+  height: 22,
+  padding: "0 4px",
+  borderRadius: 4,
+  border: "1.5px solid",
+  fontSize: "0.625rem",
+  fontWeight: 700,
+  textTransform: "uppercase",
+  lineHeight: 1,
+  flexShrink: 0
+});
 const getExtension = (fileName) => {
   if (!fileName) return "";
   const lastDot = fileName.lastIndexOf(".");
   return lastDot >= 0 ? fileName.slice(lastDot + 1).toLowerCase() : "";
 };
 const FileTypeIcon = ({ fileName, className }) => {
-  const classes = useStyles();
   const ext = getExtension(fileName);
   const color = FILE_TYPE_COLORS[ext] ?? DEFAULT_COLOR;
   const label = ext || "?";
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: `${classes.badge}${className ? ` ${className}` : ""}`,
-      style: { borderColor: color, color },
-      children: label
-    }
-  );
+  return /* @__PURE__ */ jsx(Badge, { className, style: { borderColor: color, color }, children: label });
 };
 
 export { FileTypeIcon };

package/dist/components/notebooks/FileTypeIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTypeIcon.esm.js","sources":["../../../src/components/notebooks/FileTypeIcon.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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\nimport { makeStyles } from '@material-ui/core';\n\nconst FILE_TYPE_COLORS: Record<string, string> = {\n  pdf: '#C9190B',\n  yaml: '#F0AB00',\n  yml: '#F0AB00',\n  json: '#F0AB00',\n  csv: '#3E8635',\n  txt: '#6A6E73',\n  md: '#0066CC',\n  log: '#6A6E73',\n  docx: '#004B95',\n  odt: '#009596',\n  html: '#EC7A08',\n  xml: '#0066CC',\n  rtf: '#8476D1',\n  pptx: '#C9190B',\n};\n\nconst DEFAULT_COLOR = '#6A6E73';\n\nconst useStyles = makeStyles(() => ({\n  badge: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: 28,\n    height: 22,\n    padding: '0 4px',\n    borderRadius: 4,\n    border: '1.5px solid',\n    fontSize: '0.625rem',\n    fontWeight: 700,\n    textTransform: 'uppercase',\n    lineHeight: 1,\n    flexShrink: 0,\n  },\n}));\n\ntype FileTypeIconProps = {\n  fileName: string;\n  className?: string;\n};\n\nconst getExtension = (fileName: string): string => {\n  if (!fileName) return '';\n  const lastDot = fileName.lastIndexOf('.');\n  return lastDot >= 0 ? fileName.slice(lastDot + 1).toLowerCase() : '';\n};\n\nexport const FileTypeIcon = ({ fileName, className }: FileTypeIconProps) => {\n  const classes = useStyles();\n  const ext = getExtension(fileName);\n  const color = FILE_TYPE_COLORS[ext] ?? DEFAULT_COLOR;\n  const label = ext || '?';\n\n  return (\n    <span\n      className={`${classes.badge}${className ? ` ${className}` : ''}`}\n      style={{ borderColor: color, color }}\n    >\n      {label}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;AAkBA,MAAM,gBAAA,GAA2C;AAAA,EAC/C,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,aAAA,GAAgB,SAAA;AAEtB,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,QAAA,EAAU,EAAA;AAAA,IACV,MAAA,EAAQ,EAAA;AAAA,IACR,OAAA,EAAS,OAAA;AAAA,IACT,YAAA,EAAc,CAAA;AAAA,IACd,MAAA,EAAQ,aAAA;AAAA,IACR,QAAA,EAAU,UAAA;AAAA,IACV,UAAA,EAAY,GAAA;AAAA,IACZ,aAAA,EAAe,WAAA;AAAA,IACf,UAAA,EAAY,CAAA;AAAA,IACZ,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE,CAAA;AAOF,MAAM,YAAA,GAAe,CAAC,QAAA,KAA6B;AACjD,EAAA,IAAI,CAAC,UAAU,OAAO,EAAA;AACtB,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,WAAA,CAAY,GAAG,CAAA;AACxC,EAAA,OAAO,OAAA,IAAW,IAAI,QAAA,CAAS,KAAA,CAAM,UAAU,CAAC,CAAA,CAAE,aAAY,GAAI,EAAA;AACpE,CAAA;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAU,WAAU,KAAyB;AAC1E,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,GAAA,GAAM,aAAa,QAAQ,CAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,gBAAA,CAAiB,GAAG,CAAA,IAAK,aAAA;AACvC,EAAA,MAAM,QAAQ,GAAA,IAAO,GAAA;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,OAAA,CAAQ,KAAK,GAAG,SAAA,GAAY,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA;AAAA,MAC9D,KAAA,EAAO,EAAE,WAAA,EAAa,KAAA,EAAO,KAAA,EAAM;AAAA,MAElC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"FileTypeIcon.esm.js","sources":["../../../src/components/notebooks/FileTypeIcon.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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\nimport { styled } from '@mui/material/styles';\n\nconst FILE_TYPE_COLORS: Record<string, string> = {\n  pdf: '#C9190B',\n  yaml: '#F0AB00',\n  yml: '#F0AB00',\n  json: '#F0AB00',\n  csv: '#3E8635',\n  txt: '#6A6E73',\n  md: '#0066CC',\n  log: '#6A6E73',\n  docx: '#004B95',\n  odt: '#009596',\n  html: '#EC7A08',\n  xml: '#0066CC',\n  rtf: '#8476D1',\n  pptx: '#C9190B',\n};\n\nconst DEFAULT_COLOR = '#6A6E73';\n\nconst Badge = styled('span')({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: 28,\n  height: 22,\n  padding: '0 4px',\n  borderRadius: 4,\n  border: '1.5px solid',\n  fontSize: '0.625rem',\n  fontWeight: 700,\n  textTransform: 'uppercase',\n  lineHeight: 1,\n  flexShrink: 0,\n});\n\ntype FileTypeIconProps = {\n  fileName: string;\n  className?: string;\n};\n\nconst getExtension = (fileName: string): string => {\n  if (!fileName) return '';\n  const lastDot = fileName.lastIndexOf('.');\n  return lastDot >= 0 ? fileName.slice(lastDot + 1).toLowerCase() : '';\n};\n\nexport const FileTypeIcon = ({ fileName, className }: FileTypeIconProps) => {\n  const ext = getExtension(fileName);\n  const color = FILE_TYPE_COLORS[ext] ?? DEFAULT_COLOR;\n  const label = ext || '?';\n\n  return (\n    <Badge className={className} style={{ borderColor: color, color }}>\n      {label}\n    </Badge>\n  );\n};\n"],"names":[],"mappings":";;;AAkBA,MAAM,gBAAA,GAA2C;AAAA,EAC/C,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM,SAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,aAAA,GAAgB,SAAA;AAEtB,MAAM,KAAA,GAAQ,MAAA,CAAO,MAAM,CAAA,CAAE;AAAA,EAC3B,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,QAAA;AAAA,EAChB,QAAA,EAAU,EAAA;AAAA,EACV,MAAA,EAAQ,EAAA;AAAA,EACR,OAAA,EAAS,OAAA;AAAA,EACT,YAAA,EAAc,CAAA;AAAA,EACd,MAAA,EAAQ,aAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,UAAA,EAAY,GAAA;AAAA,EACZ,aAAA,EAAe,WAAA;AAAA,EACf,UAAA,EAAY,CAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAC,CAAA;AAOD,MAAM,YAAA,GAAe,CAAC,QAAA,KAA6B;AACjD,EAAA,IAAI,CAAC,UAAU,OAAO,EAAA;AACtB,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,WAAA,CAAY,GAAG,CAAA;AACxC,EAAA,OAAO,OAAA,IAAW,IAAI,QAAA,CAAS,KAAA,CAAM,UAAU,CAAC,CAAA,CAAE,aAAY,GAAI,EAAA;AACpE,CAAA;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAU,WAAU,KAAyB;AAC1E,EAAA,MAAM,GAAA,GAAM,aAAa,QAAQ,CAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,gBAAA,CAAiB,GAAG,CAAA,IAAK,aAAA;AACvC,EAAA,MAAM,QAAQ,GAAA,IAAO,GAAA;AAErB,EAAA,uBACE,GAAA,CAAC,SAAM,SAAA,EAAsB,KAAA,EAAO,EAAE,WAAA,EAAa,KAAA,EAAO,KAAA,EAAM,EAC7D,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/notebooks/NotebookCard.esm.js

@@ -1,11 +1,75 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import { Card, CardHeader, CardTitle, TextInput, Dropdown, DropdownList, DropdownItem, MenuToggle, CardBody } from '@patternfly/react-core';
+import { Card, CardHeader, Dropdown, MenuToggle, DropdownList, DropdownItem, CardTitle, CardBody, TextInput } from '@patternfly/react-core';
 import { CatalogIcon, PenIcon, TrashIcon, EllipsisVIcon } from '@patternfly/react-icons';
 import { useInlineEdit } from '../../hooks/notebooks/useInlineEdit.esm.js';
 import { formatUpdatedLabel } from '../../utils/notebooks-utils.esm.js';
 
+const StyledCard = styled(Card)(({ theme }) => ({
+  borderRadius: theme.spacing(1.5),
+  display: "flex",
+  flexDirection: "column",
+  "&:hover": {
+    borderColor: "var(--pf-t--global--border--color--hover)",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    cursor: "pointer"
+  }
+}));
+const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
+  padding: theme.spacing(3),
+  paddingBottom: 0,
+  alignItems: "center",
+  "& .pf-v6-c-card__header-aside, & .pf-v6-c-card__actions": {
+    marginLeft: theme.spacing(1)
+  }
+}));
+const StyledDropdown = styled(Dropdown)({
+  "--pf-v6-c-menu--PaddingBlockStart": "0",
+  "--pf-v6-c-menu--PaddingBlockEnd": "0"
+});
+const StyledMenuToggle = styled(MenuToggle)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const StyledDropdownList = styled(DropdownList)({
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingInlineStart: 0
+});
+const StyledDropdownItem = styled(DropdownItem)(({ theme }) => ({
+  justifyContent: "flex-start",
+  textAlign: "left",
+  paddingLeft: theme.spacing(0.5),
+  paddingRight: theme.spacing(0.5)
+}));
+const StyledCardTitle = styled(CardTitle)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  minWidth: 0,
+  flex: 1
+}));
+const TitleText = styled("span")({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  cursor: "pointer",
+  borderRadius: 4,
+  padding: "2px 6px",
+  "&:hover": {
+    backgroundColor: "var(--pf-t--global--background--color--action--plain--hover)"
+  }
+});
+const CardDivider = styled("div")(({ theme }) => ({
+  borderTop: "1px solid var(--pf-t--global--border--color--default)",
+  marginTop: theme.spacing(1)
+}));
+const StyledCardBody = styled(CardBody)(({ theme }) => ({
+  padding: theme.spacing(3),
+  paddingTop: theme.spacing(2)
+}));
 const titleInputStyle = {
   "--pf-v6-c-form-control--before--BorderStyle": "none",
   "--pf-v6-c-form-control--after--BorderColor": "var(--pf-t--global--text--color--brand--default)",
@@ -21,7 +85,6 @@ const titleInputStyle = {
 };
 const NotebookCard = ({
   notebook,
-  classes,
   openNotebookMenuId,
   setOpenNotebookMenuId,
   onClick,
@@ -55,9 +118,8 @@ const NotebookCard = ({
     }
   };
   return /* @__PURE__ */ jsxs(
-    Card,
+    StyledCard,
     {
-      className: classes.notebookCard,
       component: "div",
       tabIndex: 0,
       "aria-label": t("notebooks.card.openAria", {
@@ -67,14 +129,12 @@ const NotebookCard = ({
       onKeyDown: handleCardKeyDown,
       children: [
         /* @__PURE__ */ jsx(
-          CardHeader,
+          StyledCardHeader,
           {
-            className: classes.notebookCardHeader,
             actions: {
               actions: /* @__PURE__ */ jsx(
-                Dropdown,
+                StyledDropdown,
                 {
-                  className: classes.notebookDropdownMenu,
                   isOpen: isMenuOpen,
                   popperProps: {
                     position: "end",
@@ -82,11 +142,10 @@ const NotebookCard = ({
                   },
                   onOpenChange: (isOpen) => setOpenNotebookMenuId(isOpen ? notebook.session_id : null),
                   toggle: (toggleRef) => /* @__PURE__ */ jsx(
-                    MenuToggle,
+                    StyledMenuToggle,
                     {
                       ref: toggleRef,
                       variant: "plain",
-                      className: classes.notebookMenuButton,
                       "aria-label": t("aria.options.label"),
                       isExpanded: isMenuOpen,
                       onClick: (event) => {
@@ -98,11 +157,10 @@ const NotebookCard = ({
                       children: /* @__PURE__ */ jsx(EllipsisVIcon, {})
                     }
                   ),
-                  children: /* @__PURE__ */ jsxs(DropdownList, { className: classes.notebookDropdownList, children: [
+                  children: /* @__PURE__ */ jsxs(StyledDropdownList, { children: [
                     /* @__PURE__ */ jsx(
-                      DropdownItem,
+                      StyledDropdownItem,
                       {
-                        className: classes.notebookDropdownItem,
                         icon: /* @__PURE__ */ jsx(PenIcon, {}),
                         onClick: (event) => {
                           event.stopPropagation();
@@ -112,9 +170,8 @@ const NotebookCard = ({
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      DropdownItem,
+                      StyledDropdownItem,
                       {
-                        className: classes.notebookDropdownItem,
                         icon: /* @__PURE__ */ jsx(TrashIcon, {}),
                         onClick: (event) => {
                           event.stopPropagation();
@@ -126,10 +183,9 @@ const NotebookCard = ({
                     )
                   ] })
                 }
-              ),
-              className: classes.notebookCardHeaderActions
+              )
             },
-            children: /* @__PURE__ */ jsxs(CardTitle, { className: classes.notebookTitle, children: [
+            children: /* @__PURE__ */ jsxs(StyledCardTitle, { children: [
               /* @__PURE__ */ jsx(CatalogIcon, {}),
               isEditing ? /* @__PURE__ */ jsx(
                 TextInput,
@@ -144,10 +200,8 @@ const NotebookCard = ({
                   onClick: (e) => e.stopPropagation()
                 }
               ) : /* @__PURE__ */ jsx(
-                Typography,
+                TitleText,
                 {
-                  component: "span",
-                  className: classes.notebookTitleText,
                   title: t("notebooks.rename.inline.tooltip"),
                   onClick: (e) => {
                     e.stopPropagation();
@@ -159,12 +213,19 @@ const NotebookCard = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: classes.notebookCardDivider }),
-        /* @__PURE__ */ jsx(CardBody, { className: classes.notebookCardBody, children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: classes.notebookDocuments, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("notebooks.documents", {
+        /* @__PURE__ */ jsx(CardDivider, {}),
+        /* @__PURE__ */ jsx(StyledCardBody, { children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { pt: 1 }, children: t("notebooks.documents", {
             count: notebook.document_count ?? 0
           }) }) }),
-          /* @__PURE__ */ jsx("div", { className: classes.notebookUpdated, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: formatUpdatedLabel(notebook.updated_at, t) }) })
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              sx: { display: "block", pb: 3, pt: 2, fontStyle: "italic" },
+              children: formatUpdatedLabel(notebook.updated_at, t)
+            }
+          ) })
         ] }) })
       ]
     }

package/dist/components/notebooks/NotebookCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookCard.esm.js","sources":["../../../src/components/notebooks/NotebookCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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\nimport { useCallback } from 'react';\n\nimport type { TranslationFunction } from '@backstage/core-plugin-api/alpha';\n\nimport Typography from '@mui/material/Typography';\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  CardTitle,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  TextInput,\n} from '@patternfly/react-core';\nimport {\n  CatalogIcon,\n  EllipsisVIcon,\n  PenIcon,\n  TrashIcon,\n} from '@patternfly/react-icons';\n\nimport { useInlineEdit } from '../../hooks/notebooks/useInlineEdit';\nimport { intelligentAssistantTranslationRef } from '../../translations/ref';\nimport { NotebookSession } from '../../types';\nimport { formatUpdatedLabel } from '../../utils/notebooks-utils';\n\ntype NotebookCardProps = {\n  notebook: NotebookSession;\n  classes: Record<string, string>;\n  openNotebookMenuId: string | null;\n  setOpenNotebookMenuId: React.Dispatch<React.SetStateAction<string | null>>;\n  onClick: (notebook: NotebookSession) => void;\n  onRename: (sessionId: string, newName: string) => void;\n  onDelete: (sessionId: string) => void;\n  t: TranslationFunction<typeof intelligentAssistantTranslationRef.T>;\n};\n\nconst titleInputStyle: React.CSSProperties = {\n  '--pf-v6-c-form-control--before--BorderStyle': 'none',\n  '--pf-v6-c-form-control--after--BorderColor':\n    'var(--pf-t--global--text--color--brand--default)',\n  '--pf-v6-c-form-control--FontSize': '1.25rem',\n  '--pf-v6-c-form-control--PaddingBlockStart': '2px',\n  '--pf-v6-c-form-control--PaddingBlockEnd': '2px',\n  '--pf-v6-c-form-control--PaddingInlineStart': '6px',\n  '--pf-v6-c-form-control--PaddingInlineEnd': '6px',\n  '--pf-v6-c-form-control--OutlineOffset': '0',\n  width: '100%',\n  minWidth: 0,\n  fontWeight: 500,\n} as React.CSSProperties;\n\nexport const NotebookCard = ({\n  notebook,\n  classes,\n  openNotebookMenuId,\n  setOpenNotebookMenuId,\n  onClick,\n  onRename,\n  onDelete,\n  t,\n}: NotebookCardProps) => {\n  const isMenuOpen = openNotebookMenuId === notebook.session_id;\n\n  const {\n    isEditing,\n    editValue: editName,\n    setEditValue: setEditName,\n    inputRef,\n    startEditing,\n    save: saveRename,\n    handleKeyDown,\n  } = useInlineEdit({\n    currentName: notebook.name,\n    onSave: newName => onRename(notebook.session_id, newName),\n    onStart: () => setOpenNotebookMenuId(null),\n  });\n\n  const handleCardClick = useCallback(() => {\n    if (!isEditing) {\n      onClick(notebook);\n    }\n  }, [isEditing, onClick, notebook]);\n\n  const handleCardKeyDown = (e: React.KeyboardEvent) => {\n    if (!isEditing && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick(notebook);\n    }\n  };\n\n  return (\n    <Card\n      className={classes.notebookCard}\n      component=\"div\"\n      tabIndex={0}\n      aria-label={(t as Function)('notebooks.card.openAria', {\n        name: notebook.name,\n      })}\n      onClick={handleCardClick}\n      onKeyDown={handleCardKeyDown}\n    >\n      <CardHeader\n        className={classes.notebookCardHeader}\n        actions={{\n          actions: (\n            <Dropdown\n              className={classes.notebookDropdownMenu}\n              isOpen={isMenuOpen}\n              popperProps={{\n                position: 'end',\n                preventOverflow: true,\n              }}\n              onOpenChange={isOpen =>\n                setOpenNotebookMenuId(isOpen ? notebook.session_id : null)\n              }\n              toggle={toggleRef => (\n                <MenuToggle\n                  ref={toggleRef}\n                  variant=\"plain\"\n                  className={classes.notebookMenuButton}\n                  aria-label={t('aria.options.label')}\n                  isExpanded={isMenuOpen}\n                  onClick={event => {\n                    event.stopPropagation();\n                    setOpenNotebookMenuId(current =>\n                      current === notebook.session_id\n                        ? null\n                        : notebook.session_id,\n                    );\n                  }}\n                >\n                  <EllipsisVIcon />\n                </MenuToggle>\n              )}\n            >\n              <DropdownList className={classes.notebookDropdownList}>\n                <DropdownItem\n                  className={classes.notebookDropdownItem}\n                  icon={<PenIcon />}\n                  onClick={event => {\n                    event.stopPropagation();\n                    startEditing();\n                  }}\n                >\n                  {t('notebooks.actions.rename')}\n                </DropdownItem>\n                <DropdownItem\n                  className={classes.notebookDropdownItem}\n                  icon={<TrashIcon />}\n                  onClick={event => {\n                    event.stopPropagation();\n                    onDelete(notebook.session_id);\n                    setOpenNotebookMenuId(null);\n                  }}\n                >\n                  {t('notebooks.actions.delete')}\n                </DropdownItem>\n              </DropdownList>\n            </Dropdown>\n          ),\n          className: classes.notebookCardHeaderActions,\n        }}\n      >\n        <CardTitle className={classes.notebookTitle}>\n          <CatalogIcon />\n          {isEditing ? (\n            <TextInput\n              ref={inputRef}\n              style={titleInputStyle}\n              value={editName}\n              onChange={(_event, value) => setEditName(value)}\n              onBlur={saveRename}\n              onKeyDown={handleKeyDown}\n              aria-label={t('notebooks.rename.inline.tooltip')}\n              onClick={e => e.stopPropagation()}\n            />\n          ) : (\n            <Typography\n              component=\"span\"\n              className={classes.notebookTitleText}\n              title={t('notebooks.rename.inline.tooltip')}\n              onClick={e => {\n                e.stopPropagation();\n                startEditing();\n              }}\n            >\n              {notebook.name}\n            </Typography>\n          )}\n        </CardTitle>\n      </CardHeader>\n      <div className={classes.notebookCardDivider} />\n      <CardBody className={classes.notebookCardBody}>\n        <div>\n          <div className={classes.notebookDocuments}>\n            <Typography variant=\"body2\">\n              {(t as Function)('notebooks.documents', {\n                count: notebook.document_count ?? 0,\n              })}\n            </Typography>\n          </div>\n          <div className={classes.notebookUpdated}>\n            <Typography variant=\"caption\">\n              {formatUpdatedLabel(notebook.updated_at, t)}\n            </Typography>\n          </div>\n        </div>\n      </CardBody>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotebookCard.esm.js","sources":["../../../src/components/notebooks/NotebookCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\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\nimport { useCallback } from 'react';\n\nimport type { TranslationFunction } from '@backstage/core-plugin-api/alpha';\n\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  CardTitle,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  TextInput,\n} from '@patternfly/react-core';\nimport {\n  CatalogIcon,\n  EllipsisVIcon,\n  PenIcon,\n  TrashIcon,\n} from '@patternfly/react-icons';\n\nimport { useInlineEdit } from '../../hooks/notebooks/useInlineEdit';\nimport { intelligentAssistantTranslationRef } from '../../translations/ref';\nimport { NotebookSession } from '../../types';\nimport { formatUpdatedLabel } from '../../utils/notebooks-utils';\n\ntype NotebookCardProps = {\n  notebook: NotebookSession;\n  openNotebookMenuId: string | null;\n  setOpenNotebookMenuId: React.Dispatch<React.SetStateAction<string | null>>;\n  onClick: (notebook: NotebookSession) => void;\n  onRename: (sessionId: string, newName: string) => void;\n  onDelete: (sessionId: string) => void;\n  t: TranslationFunction<typeof intelligentAssistantTranslationRef.T>;\n};\n\nconst StyledCard = styled(Card)(({ theme }) => ({\n  borderRadius: theme.spacing(1.5),\n  display: 'flex',\n  flexDirection: 'column',\n  '&:hover': {\n    borderColor: 'var(--pf-t--global--border--color--hover)',\n    borderWidth: '1px',\n    borderStyle: 'solid',\n    cursor: 'pointer',\n  },\n}));\n\nconst StyledCardHeader = styled(CardHeader)(({ theme }) => ({\n  padding: theme.spacing(3),\n  paddingBottom: 0,\n  alignItems: 'center',\n  '& .pf-v6-c-card__header-aside, & .pf-v6-c-card__actions': {\n    marginLeft: theme.spacing(1),\n  },\n}));\n\nconst StyledDropdown = styled(Dropdown)({\n  '--pf-v6-c-menu--PaddingBlockStart': '0',\n  '--pf-v6-c-menu--PaddingBlockEnd': '0',\n});\n\nconst StyledMenuToggle = styled(MenuToggle)(({ theme }) => ({\n  color: theme.palette.text.secondary,\n}));\n\nconst StyledDropdownList = styled(DropdownList)({\n  paddingTop: 0,\n  paddingBottom: 0,\n  paddingInlineStart: 0,\n});\n\nconst StyledDropdownItem = styled(DropdownItem)(({ theme }) => ({\n  justifyContent: 'flex-start',\n  textAlign: 'left',\n  paddingLeft: theme.spacing(0.5),\n  paddingRight: theme.spacing(0.5),\n}));\n\nconst StyledCardTitle = styled(CardTitle)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  minWidth: 0,\n  flex: 1,\n}));\n\nconst TitleText = styled('span')({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  cursor: 'pointer',\n  borderRadius: 4,\n  padding: '2px 6px',\n  '&:hover': {\n    backgroundColor:\n      'var(--pf-t--global--background--color--action--plain--hover)',\n  },\n});\n\nconst CardDivider = styled('div')(({ theme }) => ({\n  borderTop: '1px solid var(--pf-t--global--border--color--default)',\n  marginTop: theme.spacing(1),\n}));\n\nconst StyledCardBody = styled(CardBody)(({ theme }) => ({\n  padding: theme.spacing(3),\n  paddingTop: theme.spacing(2),\n}));\n\nconst titleInputStyle: React.CSSProperties = {\n  '--pf-v6-c-form-control--before--BorderStyle': 'none',\n  '--pf-v6-c-form-control--after--BorderColor':\n    'var(--pf-t--global--text--color--brand--default)',\n  '--pf-v6-c-form-control--FontSize': '1.25rem',\n  '--pf-v6-c-form-control--PaddingBlockStart': '2px',\n  '--pf-v6-c-form-control--PaddingBlockEnd': '2px',\n  '--pf-v6-c-form-control--PaddingInlineStart': '6px',\n  '--pf-v6-c-form-control--PaddingInlineEnd': '6px',\n  '--pf-v6-c-form-control--OutlineOffset': '0',\n  width: '100%',\n  minWidth: 0,\n  fontWeight: 500,\n} as React.CSSProperties;\n\nexport const NotebookCard = ({\n  notebook,\n  openNotebookMenuId,\n  setOpenNotebookMenuId,\n  onClick,\n  onRename,\n  onDelete,\n  t,\n}: NotebookCardProps) => {\n  const isMenuOpen = openNotebookMenuId === notebook.session_id;\n\n  const {\n    isEditing,\n    editValue: editName,\n    setEditValue: setEditName,\n    inputRef,\n    startEditing,\n    save: saveRename,\n    handleKeyDown,\n  } = useInlineEdit({\n    currentName: notebook.name,\n    onSave: newName => onRename(notebook.session_id, newName),\n    onStart: () => setOpenNotebookMenuId(null),\n  });\n\n  const handleCardClick = useCallback(() => {\n    if (!isEditing) {\n      onClick(notebook);\n    }\n  }, [isEditing, onClick, notebook]);\n\n  const handleCardKeyDown = (e: React.KeyboardEvent) => {\n    if (!isEditing && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick(notebook);\n    }\n  };\n\n  return (\n    <StyledCard\n      component=\"div\"\n      tabIndex={0}\n      aria-label={(t as Function)('notebooks.card.openAria', {\n        name: notebook.name,\n      })}\n      onClick={handleCardClick}\n      onKeyDown={handleCardKeyDown}\n    >\n      <StyledCardHeader\n        actions={{\n          actions: (\n            <StyledDropdown\n              isOpen={isMenuOpen}\n              popperProps={{\n                position: 'end',\n                preventOverflow: true,\n              }}\n              onOpenChange={isOpen =>\n                setOpenNotebookMenuId(isOpen ? notebook.session_id : null)\n              }\n              toggle={toggleRef => (\n                <StyledMenuToggle\n                  ref={toggleRef}\n                  variant=\"plain\"\n                  aria-label={t('aria.options.label')}\n                  isExpanded={isMenuOpen}\n                  onClick={event => {\n                    event.stopPropagation();\n                    setOpenNotebookMenuId(current =>\n                      current === notebook.session_id\n                        ? null\n                        : notebook.session_id,\n                    );\n                  }}\n                >\n                  <EllipsisVIcon />\n                </StyledMenuToggle>\n              )}\n            >\n              <StyledDropdownList>\n                <StyledDropdownItem\n                  icon={<PenIcon />}\n                  onClick={event => {\n                    event.stopPropagation();\n                    startEditing();\n                  }}\n                >\n                  {t('notebooks.actions.rename')}\n                </StyledDropdownItem>\n                <StyledDropdownItem\n                  icon={<TrashIcon />}\n                  onClick={event => {\n                    event.stopPropagation();\n                    onDelete(notebook.session_id);\n                    setOpenNotebookMenuId(null);\n                  }}\n                >\n                  {t('notebooks.actions.delete')}\n                </StyledDropdownItem>\n              </StyledDropdownList>\n            </StyledDropdown>\n          ),\n        }}\n      >\n        <StyledCardTitle>\n          <CatalogIcon />\n          {isEditing ? (\n            <TextInput\n              ref={inputRef}\n              style={titleInputStyle}\n              value={editName}\n              onChange={(_event, value) => setEditName(value)}\n              onBlur={saveRename}\n              onKeyDown={handleKeyDown}\n              aria-label={t('notebooks.rename.inline.tooltip')}\n              onClick={e => e.stopPropagation()}\n            />\n          ) : (\n            <TitleText\n              title={t('notebooks.rename.inline.tooltip')}\n              onClick={e => {\n                e.stopPropagation();\n                startEditing();\n              }}\n            >\n              {notebook.name}\n            </TitleText>\n          )}\n        </StyledCardTitle>\n      </StyledCardHeader>\n      <CardDivider />\n      <StyledCardBody>\n        <div>\n          <div>\n            <Typography variant=\"body2\" sx={{ pt: 1 }}>\n              {(t as Function)('notebooks.documents', {\n                count: notebook.document_count ?? 0,\n              })}\n            </Typography>\n          </div>\n          <div>\n            <Typography\n              variant=\"caption\"\n              sx={{ display: 'block', pb: 3, pt: 2, fontStyle: 'italic' }}\n            >\n              {formatUpdatedLabel(notebook.updated_at, t)}\n            </Typography>\n          </div>\n        </div>\n      </StyledCardBody>\n    </StyledCard>\n  );\n};\n"],"names":[],"mappings":"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"}