@backstage/plugin-scaffolder 1.30.0-next.1 → 1.30.0

package/dist/alpha/components/TemplateEditorPage/TemplateEditorPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 */\nimport React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  FormProps,\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { editRouteRef } from '../../../routes';\nimport { TemplateEditor } from './TemplateEditor';\n\nconst useStyles = makeStyles(\n  {\n    content: {\n      padding: 0,\n    },\n  },\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\ninterface TemplatePageProps {\n  defaultPreviewTemplate?: string;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}\n\nexport function TemplateEditorPage(props: TemplatePageProps) {\n  const classes = useStyles();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateEditorPage.title')}\n        subtitle={t('templateEditorPage.subtitle')}\n        type={t('templateIntroPage.title')}\n        typeLink={editLink()}\n      />\n      <Content className={classes.content}>\n        <TemplateEditor\n          layouts={props.layouts}\n          formProps={props.formProps}\n          fieldExtensions={props.fieldExtensions}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA6BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,EAAE,MAAM,iCAAkC;AAC5C,CAAA;AASO,SAAS,mBAAmB,KAA0B,EAAA;AAC3D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,0BAA0B,CAAA;AAAA,MACnC,QAAA,EAAU,EAAE,6BAA6B,CAAA;AAAA,MACzC,IAAA,EAAM,EAAE,yBAAyB,CAAA;AAAA,MACjC,UAAU,QAAS;AAAA;AAAA,GAErB,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,QAAQ,OAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,iBAAiB,KAAM,CAAA;AAAA;AAAA,GAE3B,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorPage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 */\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  FormProps,\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { editRouteRef } from '../../../routes';\nimport { TemplateEditor } from './TemplateEditor';\n\nconst useStyles = makeStyles(\n  {\n    content: {\n      padding: 0,\n    },\n  },\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\ninterface TemplatePageProps {\n  defaultPreviewTemplate?: string;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}\n\nexport function TemplateEditorPage(props: TemplatePageProps) {\n  const classes = useStyles();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateEditorPage.title')}\n        subtitle={t('templateEditorPage.subtitle')}\n        type={t('templateIntroPage.title')}\n        typeLink={editLink()}\n      />\n      <Content className={classes.content}>\n        <TemplateEditor\n          layouts={props.layouts}\n          formProps={props.formProps}\n          fieldExtensions={props.fieldExtensions}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA4BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,EAAE,MAAM,iCAAkC;AAC5C,CAAA;AASO,SAAS,mBAAmB,KAA0B,EAAA;AAC3D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,0BAA0B,CAAA;AAAA,QACnC,QAAA,EAAU,EAAE,6BAA6B,CAAA;AAAA,QACzC,IAAA,EAAM,EAAE,yBAAyB,CAAA;AAAA,QACjC,UAAU,QAAS;AAAA;AAAA,KACrB;AAAA,oBACC,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,OAC1B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,WAAW,KAAM,CAAA,SAAA;AAAA,QACjB,iBAAiB,KAAM,CAAA;AAAA;AAAA,KAE3B,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/TemplateEditorPage/TemplateEditorTextArea.esm.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
 import { showPanel } from '@codemirror/view';
@@ -10,7 +11,7 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
 import { useKeyboardEvent } from '@react-hookz/web';
 import CodeMirror from '@uiw/react-codemirror';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
@@ -73,61 +74,67 @@ function TemplateEditorTextArea(props) {
       }
     }
   );
-  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      className: classes.codeMirror,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml), panelExtension],
-      value: props.content,
-      onChange: props.onUpdate
-    }
-  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t(
-        "templateEditorPage.templateEditorTextArea.saveIconTooltip"
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      IconButton,
+  return /* @__PURE__ */ jsxs("div", { className: classes.container, children: [
+    /* @__PURE__ */ jsx(
+      CodeMirror,
       {
-        className: classes.floatingButton,
-        onClick: () => props.onSave?.()
-      },
-      /* @__PURE__ */ React.createElement(SaveIcon, null)
-    )
-  ), props.onReload && /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t(
-        "templateEditorPage.templateEditorTextArea.refreshIconTooltip"
+        className: classes.codeMirror,
+        theme: "dark",
+        height: "100%",
+        extensions: [StreamLanguage.define(yaml), panelExtension],
+        value: props.content,
+        onChange: props.onUpdate
+      }
+    ),
+    (props.onSave || props.onReload) && /* @__PURE__ */ jsx("div", { className: classes.floatingButtons, children: /* @__PURE__ */ jsxs(Paper, { children: [
+      props.onSave && /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t(
+            "templateEditorPage.templateEditorTextArea.saveIconTooltip"
+          ),
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: classes.floatingButton,
+              onClick: () => props.onSave?.(),
+              children: /* @__PURE__ */ jsx(SaveIcon, {})
+            }
+          )
+        }
+      ),
+      props.onReload && /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t(
+            "templateEditorPage.templateEditorTextArea.refreshIconTooltip"
+          ),
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: classes.floatingButton,
+              onClick: () => props.onReload?.(),
+              children: /* @__PURE__ */ jsx(RefreshIcon, {})
+            }
+          )
+        }
       )
-    },
-    /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        className: classes.floatingButton,
-        onClick: () => props.onReload?.()
-      },
-      /* @__PURE__ */ React.createElement(RefreshIcon, null)
-    )
-  ))));
+    ] }) })
+  ] });
 }
 function TemplateEditorDirectoryEditorTextArea(props) {
   const classes = useStyles();
   const directoryEditor = useDirectoryEditor();
   const { t } = useTranslationRef(scaffolderTranslationRef);
   if (!directoryEditor) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Typography,
       {
         className: classes.typography,
         color: "textSecondary",
-        align: "center"
-      },
-      t("templateEditorPage.templateEditorTextArea.emptyStateParagraph")
+        align: "center",
+        children: t("templateEditorPage.templateEditorTextArea.emptyStateParagraph")
+      }
     );
   }
   const actions = directoryEditor?.selectedFile?.dirty ? {
@@ -136,7 +143,7 @@ function TemplateEditorDirectoryEditorTextArea(props) {
   } : {
     onReload: () => directoryEditor.reload()
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     TemplateEditorTextArea,
     {
       errorText: props.errorText,

package/dist/alpha/components/TemplateEditorPage/TemplateEditorTextArea.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\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 { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport { showPanel } from '@codemirror/view';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport { useKeyboardEvent } from '@react-hookz/web';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useMemo } from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  typography: {\n    padding: theme.spacing(1.5),\n  },\n  button: {\n    verticalAlign: 'top',\n  },\n  codeMirror: {\n    height: '100%',\n    [theme.breakpoints.up('md')]: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n    },\n  },\n  errorPanel: {\n    color: theme.palette.error.main,\n    lineHeight: 2,\n    margin: theme.spacing(0, 1),\n  },\n  floatingButtons: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(3),\n  },\n  floatingButton: {\n    padding: theme.spacing(1),\n  },\n}));\n\n/** A wrapper around CodeMirror with an error panel and extra actions available */\nexport function TemplateEditorTextArea(props: {\n  content?: string;\n  onUpdate?: (content: string) => void;\n  errorText?: string;\n  onSave?: () => void;\n  onReload?: () => void;\n}) {\n  const { errorText } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const panelExtension = useMemo(() => {\n    if (!errorText) {\n      return showPanel.of(null);\n    }\n\n    const dom = document.createElement('div');\n    dom.classList.add(classes.errorPanel);\n    dom.textContent = errorText;\n    return showPanel.of(() => ({ dom, bottom: true }));\n  }, [classes, errorText]);\n\n  useKeyboardEvent(\n    e => e.key === 's' && (e.ctrlKey || e.metaKey),\n    e => {\n      e.preventDefault();\n      if (props.onSave) {\n        props.onSave();\n      }\n    },\n  );\n\n  return (\n    <div className={classes.container}>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport), panelExtension]}\n        value={props.content}\n        onChange={props.onUpdate}\n      />\n      {(props.onSave || props.onReload) && (\n        <div className={classes.floatingButtons}>\n          <Paper>\n            {props.onSave && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.saveIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.refreshIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onReload?.()}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n          </Paper>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorTextArea that is connected to the DirectoryEditor context */\nexport function TemplateEditorDirectoryEditorTextArea(props: {\n  errorText?: string;\n}) {\n  const classes = useStyles();\n  const directoryEditor = useDirectoryEditor();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  if (!directoryEditor) {\n    return (\n      <Typography\n        className={classes.typography}\n        color=\"textSecondary\"\n        align=\"center\"\n      >\n        {t('templateEditorPage.templateEditorTextArea.emptyStateParagraph')}\n      </Typography>\n    );\n  }\n\n  const actions = directoryEditor?.selectedFile?.dirty\n    ? {\n        onSave: () => directoryEditor.save(),\n        onReload: () => directoryEditor.reload(),\n      }\n    : {\n        onReload: () => directoryEditor.reload(),\n      };\n\n  return (\n    <TemplateEditorTextArea\n      errorText={props.errorText}\n      content={directoryEditor.selectedFile?.content}\n      onUpdate={content =>\n        directoryEditor?.selectedFile?.updateContent(content)\n      }\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport"],"mappings":"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"}
+{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\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 { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport { showPanel } from '@codemirror/view';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport { useKeyboardEvent } from '@react-hookz/web';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { useMemo } from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  typography: {\n    padding: theme.spacing(1.5),\n  },\n  button: {\n    verticalAlign: 'top',\n  },\n  codeMirror: {\n    height: '100%',\n    [theme.breakpoints.up('md')]: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n    },\n  },\n  errorPanel: {\n    color: theme.palette.error.main,\n    lineHeight: 2,\n    margin: theme.spacing(0, 1),\n  },\n  floatingButtons: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(3),\n  },\n  floatingButton: {\n    padding: theme.spacing(1),\n  },\n}));\n\n/** A wrapper around CodeMirror with an error panel and extra actions available */\nexport function TemplateEditorTextArea(props: {\n  content?: string;\n  onUpdate?: (content: string) => void;\n  errorText?: string;\n  onSave?: () => void;\n  onReload?: () => void;\n}) {\n  const { errorText } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const panelExtension = useMemo(() => {\n    if (!errorText) {\n      return showPanel.of(null);\n    }\n\n    const dom = document.createElement('div');\n    dom.classList.add(classes.errorPanel);\n    dom.textContent = errorText;\n    return showPanel.of(() => ({ dom, bottom: true }));\n  }, [classes, errorText]);\n\n  useKeyboardEvent(\n    e => e.key === 's' && (e.ctrlKey || e.metaKey),\n    e => {\n      e.preventDefault();\n      if (props.onSave) {\n        props.onSave();\n      }\n    },\n  );\n\n  return (\n    <div className={classes.container}>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport), panelExtension]}\n        value={props.content}\n        onChange={props.onUpdate}\n      />\n      {(props.onSave || props.onReload) && (\n        <div className={classes.floatingButtons}>\n          <Paper>\n            {props.onSave && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.saveIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.refreshIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onReload?.()}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n          </Paper>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorTextArea that is connected to the DirectoryEditor context */\nexport function TemplateEditorDirectoryEditorTextArea(props: {\n  errorText?: string;\n}) {\n  const classes = useStyles();\n  const directoryEditor = useDirectoryEditor();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  if (!directoryEditor) {\n    return (\n      <Typography\n        className={classes.typography}\n        color=\"textSecondary\"\n        align=\"center\"\n      >\n        {t('templateEditorPage.templateEditorTextArea.emptyStateParagraph')}\n      </Typography>\n    );\n  }\n\n  const actions = directoryEditor?.selectedFile?.dirty\n    ? {\n        onSave: () => directoryEditor.save(),\n        onReload: () => directoryEditor.reload(),\n      }\n    : {\n        onReload: () => directoryEditor.reload(),\n      };\n\n  return (\n    <TemplateEditorTextArea\n      errorText={props.errorText}\n      content={directoryEditor.selectedFile?.content}\n      onUpdate={content =>\n        directoryEditor?.selectedFile?.updateContent(content)\n      }\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport"],"mappings":"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"}

package/dist/alpha/components/TemplateEditorPage/TemplateEditorToolbar.esm.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -60,66 +61,81 @@ function TemplateEditorToolbar(props) {
   const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);
   const [showActionsDrawer, setShowActionsDrawer] = useState(false);
   const [showPublishModal, setShowPublishModal] = useState(false);
-  return /* @__PURE__ */ React.createElement(AppBar, { className: classes.appbar, position: "relative" }, /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }, /* @__PURE__ */ React.createElement("div", { className: classes.toolbarCustomActions }, children), /* @__PURE__ */ React.createElement(ButtonGroup, { className: classes.toolbarDefaultActions, variant: "text" }, /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t("templateEditorToolbar.customFieldExplorerTooltip")
-    },
-    /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowFieldsDrawer(true) }, /* @__PURE__ */ React.createElement(ExtensionIcon, null))
-  ), /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      title: t(
-        "templateEditorToolbar.installedActionsDocumentationTooltip"
-      )
-    },
-    /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowActionsDrawer(true) }, /* @__PURE__ */ React.createElement(DescriptionIcon, null))
-  ), /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowPublishModal(true) }, t("templateEditorToolbar.addToCatalogButton"))), /* @__PURE__ */ React.createElement(
-    Drawer,
-    {
-      classes: { paper: classes.paper },
-      anchor: "right",
-      open: showFieldsDrawer,
-      onClose: () => setShowFieldsDrawer(false)
-    },
-    /* @__PURE__ */ React.createElement(CustomFieldPlaygroud, { fieldExtensions })
-  ), /* @__PURE__ */ React.createElement(
-    Drawer,
-    {
-      classes: { paper: classes.paper },
-      anchor: "right",
-      open: showActionsDrawer,
-      onClose: () => setShowActionsDrawer(false)
-    },
-    /* @__PURE__ */ React.createElement(ActionPageContent, null)
-  ), /* @__PURE__ */ React.createElement(
-    Dialog,
-    {
-      onClose: () => setShowPublishModal(false),
-      open: showPublishModal,
-      "aria-labelledby": "publish-dialog-title",
-      "aria-describedby": "publish-dialog-description"
-    },
-    /* @__PURE__ */ React.createElement(DialogTitle, { id: "publish-dialog-title" }, t("templateEditorToolbar.addToCatalogDialogTitle")),
-    /* @__PURE__ */ React.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React.createElement(DialogContentText, { id: "publish-dialog-slide-description" }, t(
-      "templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction"
-    ), /* @__PURE__ */ React.createElement("ul", null, t(
-      "templateEditorToolbar.addToCatalogDialogContent.stepsListItems"
-    ).split("\n").map((step, index) => /* @__PURE__ */ React.createElement("li", { key: index }, step))))),
-    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
-      Button,
+  return /* @__PURE__ */ jsx(AppBar, { className: classes.appbar, position: "relative", children: /* @__PURE__ */ jsxs(Toolbar, { className: classes.toolbar, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.toolbarCustomActions, children }),
+    /* @__PURE__ */ jsxs(ButtonGroup, { className: classes.toolbarDefaultActions, variant: "text", children: [
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t("templateEditorToolbar.customFieldExplorerTooltip"),
+          children: /* @__PURE__ */ jsx(Button, { onClick: () => setShowFieldsDrawer(true), children: /* @__PURE__ */ jsx(ExtensionIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: t(
+            "templateEditorToolbar.installedActionsDocumentationTooltip"
+          ),
+          children: /* @__PURE__ */ jsx(Button, { onClick: () => setShowActionsDrawer(true), children: /* @__PURE__ */ jsx(DescriptionIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setShowPublishModal(true), children: t("templateEditorToolbar.addToCatalogButton") })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Drawer,
       {
-        color: "primary",
-        href: t(
-          "templateEditorToolbar.addToCatalogDialogActions.documentationUrl"
-        ),
-        target: "_blank"
-      },
-      t(
-        "templateEditorToolbar.addToCatalogDialogActions.documentationButton"
-      )
-    ))
-  )));
+        classes: { paper: classes.paper },
+        anchor: "right",
+        open: showFieldsDrawer,
+        onClose: () => setShowFieldsDrawer(false),
+        children: /* @__PURE__ */ jsx(CustomFieldPlaygroud, { fieldExtensions })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        classes: { paper: classes.paper },
+        anchor: "right",
+        open: showActionsDrawer,
+        onClose: () => setShowActionsDrawer(false),
+        children: /* @__PURE__ */ jsx(ActionPageContent, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        onClose: () => setShowPublishModal(false),
+        open: showPublishModal,
+        "aria-labelledby": "publish-dialog-title",
+        "aria-describedby": "publish-dialog-description",
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { id: "publish-dialog-title", children: t("templateEditorToolbar.addToCatalogDialogTitle") }),
+          /* @__PURE__ */ jsx(DialogContent, { dividers: true, children: /* @__PURE__ */ jsxs(DialogContentText, { id: "publish-dialog-slide-description", children: [
+            t(
+              "templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction"
+            ),
+            /* @__PURE__ */ jsx("ul", { children: t(
+              "templateEditorToolbar.addToCatalogDialogContent.stepsListItems"
+            ).split("\n").map((step, index) => /* @__PURE__ */ jsx("li", { children: step }, index)) })
+          ] }) }),
+          /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: "primary",
+              href: t(
+                "templateEditorToolbar.addToCatalogDialogActions.documentationUrl"
+              ),
+              target: "_blank",
+              children: t(
+                "templateEditorToolbar.addToCatalogDialogActions.documentationButton"
+              )
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
 }
 
 export { TemplateEditorToolbar };

package/dist/alpha/components/TemplateEditorPage/TemplateEditorToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorToolbar.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 React, { ReactNode, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { ActionPageContent } from '../../../components/ActionsPage/ActionsPage';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { CustomFieldPlaygroud } from './CustomFieldPlaygroud';\n\nconst useStyles = makeStyles(\n  theme => ({\n    paper: {\n      width: '90%',\n      padding: theme.spacing(2),\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('sm')]: {\n        width: '70%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n    },\n    appbar: {\n      zIndex: 1,\n    },\n    toolbar: {\n      display: 'grid',\n      gridTemplateColumns: 'auto 1fr',\n      gridGap: theme.spacing(1),\n      padding: theme.spacing(0, 1),\n      backgroundColor: theme.palette.background.paper,\n    },\n    toolbarCustomActions: {\n      display: 'grid',\n      alignItems: 'center',\n      gridAutoFlow: 'Column',\n      gridGap: theme.spacing(1),\n    },\n    toolbarDefaultActions: {\n      justifySelf: 'end',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\nexport function TemplateEditorToolbar(props: {\n  children?: ReactNode;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) {\n  const { children, fieldExtensions } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);\n  const [showActionsDrawer, setShowActionsDrawer] = useState(false);\n  const [showPublishModal, setShowPublishModal] = useState(false);\n\n  return (\n    <AppBar className={classes.appbar} position=\"relative\">\n      <Toolbar className={classes.toolbar}>\n        <div className={classes.toolbarCustomActions}>{children}</div>\n        <ButtonGroup className={classes.toolbarDefaultActions} variant=\"text\">\n          <Tooltip\n            title={t('templateEditorToolbar.customFieldExplorerTooltip')}\n          >\n            <Button onClick={() => setShowFieldsDrawer(true)}>\n              <ExtensionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip\n            title={t(\n              'templateEditorToolbar.installedActionsDocumentationTooltip',\n            )}\n          >\n            <Button onClick={() => setShowActionsDrawer(true)}>\n              <DescriptionIcon />\n            </Button>\n          </Tooltip>\n          <Button onClick={() => setShowPublishModal(true)}>\n            {t('templateEditorToolbar.addToCatalogButton')}\n          </Button>\n        </ButtonGroup>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showFieldsDrawer}\n          onClose={() => setShowFieldsDrawer(false)}\n        >\n          <CustomFieldPlaygroud fieldExtensions={fieldExtensions} />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showActionsDrawer}\n          onClose={() => setShowActionsDrawer(false)}\n        >\n          <ActionPageContent />\n        </Drawer>\n        <Dialog\n          onClose={() => setShowPublishModal(false)}\n          open={showPublishModal}\n          aria-labelledby=\"publish-dialog-title\"\n          aria-describedby=\"publish-dialog-description\"\n        >\n          <DialogTitle id=\"publish-dialog-title\">\n            {t('templateEditorToolbar.addToCatalogDialogTitle')}\n          </DialogTitle>\n          <DialogContent dividers>\n            <DialogContentText id=\"publish-dialog-slide-description\">\n              {t(\n                'templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction',\n              )}\n              <ul>\n                {t(\n                  'templateEditorToolbar.addToCatalogDialogContent.stepsListItems',\n                )\n                  .split('\\n')\n                  .map((step, index) => (\n                    <li key={index}>{step}</li>\n                  ))}\n              </ul>\n            </DialogContentText>\n          </DialogContent>\n          <DialogActions>\n            <Button\n              color=\"primary\"\n              href={t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationUrl',\n              )}\n              target=\"_blank\"\n            >\n              {t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationButton',\n              )}\n            </Button>\n          </DialogActions>\n        </Dialog>\n      </Toolbar>\n    </AppBar>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,KAAO,EAAA,KAAA;AAAA,MACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,OAAA;AAAA,MAC1C,CAAC,KAAM,CAAA,WAAA,CAAY,EAAG,CAAA,IAAI,CAAC,GAAG;AAAA,QAC5B,KAAO,EAAA;AAAA,OACT;AAAA,MACA,CAAC,KAAM,CAAA,WAAA,CAAY,EAAG,CAAA,IAAI,CAAC,GAAG;AAAA,QAC5B,KAAO,EAAA;AAAA;AACT,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,MAAQ,EAAA;AAAA,KACV;AAAA,IACA,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,MAAA;AAAA,MACT,mBAAqB,EAAA,UAAA;AAAA,MACrB,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA;AAAA,KAC5C;AAAA,IACA,oBAAsB,EAAA;AAAA,MACpB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,YAAc,EAAA,QAAA;AAAA,MACd,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC1B;AAAA,IACA,qBAAuB,EAAA;AAAA,MACrB,WAAa,EAAA;AAAA;AACf,GACF,CAAA;AAAA,EACA,EAAE,MAAM,iCAAkC;AAC5C,CAAA;AAEO,SAAS,sBAAsB,KAGnC,EAAA;AACD,EAAM,MAAA,EAAE,QAAU,EAAA,eAAA,EAAoB,GAAA,KAAA;AACtC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9D,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAChE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,MAAA,EAAQ,UAAS,UAC1C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,OAAA,EAAA,sCACzB,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,oBAAA,EAAA,EAAuB,QAAS,CAAA,kBACvD,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,qBAAuB,EAAA,OAAA,EAAQ,MAC7D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,kDAAkD;AAAA,KAAA;AAAA,oBAE3D,KAAA,CAAA,aAAA,CAAC,UAAO,OAAS,EAAA,MAAM,oBAAoB,IAAI,CAAA,EAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAc,CACjB;AAAA,GAEF,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,CAAA;AAAA,QACL;AAAA;AACF,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,UAAO,OAAS,EAAA,MAAM,qBAAqB,IAAI,CAAA,EAAA,kBAC7C,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAgB,CACnB;AAAA,GAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA,EAAA,EAC5C,CAAE,CAAA,0CAA0C,CAC/C,CACF,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,EAAE,KAAO,EAAA,OAAA,CAAQ,KAAM,EAAA;AAAA,MAChC,MAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,gBAAA;AAAA,MACN,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK;AAAA,KAAA;AAAA,oBAExC,KAAA,CAAA,aAAA,CAAC,wBAAqB,eAAkC,EAAA;AAAA,GAE1D,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,EAAE,KAAO,EAAA,OAAA,CAAQ,KAAM,EAAA;AAAA,MAChC,MAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,iBAAA;AAAA,MACN,OAAA,EAAS,MAAM,oBAAA,CAAqB,KAAK;AAAA,KAAA;AAAA,wCAExC,iBAAkB,EAAA,IAAA;AAAA,GAErB,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,MACxC,IAAM,EAAA,gBAAA;AAAA,MACN,iBAAgB,EAAA,sBAAA;AAAA,MAChB,kBAAiB,EAAA;AAAA,KAAA;AAAA,wCAEhB,WAAY,EAAA,EAAA,EAAA,EAAG,sBACb,EAAA,EAAA,CAAA,CAAE,+CAA+C,CACpD,CAAA;AAAA,wCACC,aAAc,EAAA,EAAA,QAAA,EAAQ,wBACpB,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,EAAkB,IAAG,kCACnB,EAAA,EAAA,CAAA;AAAA,MACC;AAAA,KACF,sCACC,IACE,EAAA,IAAA,EAAA,CAAA;AAAA,MACC;AAAA,MAEC,KAAM,CAAA,IAAI,CACV,CAAA,GAAA,CAAI,CAAC,IAAM,EAAA,KAAA,qBACT,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAG,KAAK,KAAQ,EAAA,EAAA,IAAK,CACvB,CACL,CACF,CACF,CAAA;AAAA,wCACC,aACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,IAAM,EAAA,CAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,MAAO,EAAA;AAAA,OAAA;AAAA,MAEN,CAAA;AAAA,QACC;AAAA;AACF,KAEJ;AAAA,GAEJ,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateEditorToolbar.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { ReactNode, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { ActionPageContent } from '../../../components/ActionsPage/ActionsPage';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { CustomFieldPlaygroud } from './CustomFieldPlaygroud';\n\nconst useStyles = makeStyles(\n  theme => ({\n    paper: {\n      width: '90%',\n      padding: theme.spacing(2),\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('sm')]: {\n        width: '70%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n    },\n    appbar: {\n      zIndex: 1,\n    },\n    toolbar: {\n      display: 'grid',\n      gridTemplateColumns: 'auto 1fr',\n      gridGap: theme.spacing(1),\n      padding: theme.spacing(0, 1),\n      backgroundColor: theme.palette.background.paper,\n    },\n    toolbarCustomActions: {\n      display: 'grid',\n      alignItems: 'center',\n      gridAutoFlow: 'Column',\n      gridGap: theme.spacing(1),\n    },\n    toolbarDefaultActions: {\n      justifySelf: 'end',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\nexport function TemplateEditorToolbar(props: {\n  children?: ReactNode;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) {\n  const { children, fieldExtensions } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);\n  const [showActionsDrawer, setShowActionsDrawer] = useState(false);\n  const [showPublishModal, setShowPublishModal] = useState(false);\n\n  return (\n    <AppBar className={classes.appbar} position=\"relative\">\n      <Toolbar className={classes.toolbar}>\n        <div className={classes.toolbarCustomActions}>{children}</div>\n        <ButtonGroup className={classes.toolbarDefaultActions} variant=\"text\">\n          <Tooltip\n            title={t('templateEditorToolbar.customFieldExplorerTooltip')}\n          >\n            <Button onClick={() => setShowFieldsDrawer(true)}>\n              <ExtensionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip\n            title={t(\n              'templateEditorToolbar.installedActionsDocumentationTooltip',\n            )}\n          >\n            <Button onClick={() => setShowActionsDrawer(true)}>\n              <DescriptionIcon />\n            </Button>\n          </Tooltip>\n          <Button onClick={() => setShowPublishModal(true)}>\n            {t('templateEditorToolbar.addToCatalogButton')}\n          </Button>\n        </ButtonGroup>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showFieldsDrawer}\n          onClose={() => setShowFieldsDrawer(false)}\n        >\n          <CustomFieldPlaygroud fieldExtensions={fieldExtensions} />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showActionsDrawer}\n          onClose={() => setShowActionsDrawer(false)}\n        >\n          <ActionPageContent />\n        </Drawer>\n        <Dialog\n          onClose={() => setShowPublishModal(false)}\n          open={showPublishModal}\n          aria-labelledby=\"publish-dialog-title\"\n          aria-describedby=\"publish-dialog-description\"\n        >\n          <DialogTitle id=\"publish-dialog-title\">\n            {t('templateEditorToolbar.addToCatalogDialogTitle')}\n          </DialogTitle>\n          <DialogContent dividers>\n            <DialogContentText id=\"publish-dialog-slide-description\">\n              {t(\n                'templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction',\n              )}\n              <ul>\n                {t(\n                  'templateEditorToolbar.addToCatalogDialogContent.stepsListItems',\n                )\n                  .split('\\n')\n                  .map((step, index) => (\n                    <li key={index}>{step}</li>\n                  ))}\n              </ul>\n            </DialogContentText>\n          </DialogContent>\n          <DialogActions>\n            <Button\n              color=\"primary\"\n              href={t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationUrl',\n              )}\n              target=\"_blank\"\n            >\n              {t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationButton',\n              )}\n            </Button>\n          </DialogActions>\n        </Dialog>\n      </Toolbar>\n    </AppBar>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -30,43 +31,48 @@ function TemplateEditorToolbarFileMenu(props) {
     handleCloseMenu();
     onCloseDirectory?.();
   }, [handleCloseMenu, onCloseDirectory]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      "aria-controls": "file-menu",
-      "aria-haspopup": "true",
-      onClick: handleOpenMenu
-    },
-    t("templateEditorToolbarFileMenu.button")
-  ), /* @__PURE__ */ React.createElement(
-    Menu,
-    {
-      id: "file-menu",
-      anchorEl,
-      open: Boolean(anchorEl),
-      onClose: handleCloseMenu,
-      getContentAnchorEl: null,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      }
-    },
-    /* @__PURE__ */ React.createElement(MenuItem, { onClick: handleOpenDirectory, disabled: !onOpenDirectory }, t("templateEditorToolbarFileMenu.options.openDirectory")),
-    /* @__PURE__ */ React.createElement(
-      MenuItem,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
       {
-        onClick: handleCreateDirectory,
-        disabled: !onCreateDirectory,
-        divider: true
-      },
-      t("templateEditorToolbarFileMenu.options.createDirectory")
+        "aria-controls": "file-menu",
+        "aria-haspopup": "true",
+        onClick: handleOpenMenu,
+        children: t("templateEditorToolbarFileMenu.button")
+      }
     ),
-    /* @__PURE__ */ React.createElement(MenuItem, { onClick: handleCloseEditor, disabled: !onCloseDirectory }, t("templateEditorToolbarFileMenu.options.closeEditor"))
-  ));
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        id: "file-menu",
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleCloseMenu,
+        getContentAnchorEl: null,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { onClick: handleOpenDirectory, disabled: !onOpenDirectory, children: t("templateEditorToolbarFileMenu.options.openDirectory") }),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: handleCreateDirectory,
+              disabled: !onCreateDirectory,
+              divider: true,
+              children: t("templateEditorToolbarFileMenu.options.createDirectory")
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: handleCloseEditor, disabled: !onCloseDirectory, children: t("templateEditorToolbarFileMenu.options.closeEditor") })
+        ]
+      }
+    )
+  ] });
 }
 
 export { TemplateEditorToolbarFileMenu };

package/dist/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorToolbarFileMenu.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 React, { MouseEvent, useCallback, useState } from 'react';\n\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\n\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport function TemplateEditorToolbarFileMenu(props: {\n  onOpenDirectory?: () => void;\n  onCreateDirectory?: () => void;\n  onCloseDirectory?: () => void;\n}) {\n  const { onOpenDirectory, onCreateDirectory, onCloseDirectory } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleOpenMenu = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setAnchorEl(event.currentTarget);\n    },\n    [setAnchorEl],\n  );\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, [setAnchorEl]);\n\n  const handleOpenDirectory = useCallback(() => {\n    handleCloseMenu();\n    onOpenDirectory?.();\n  }, [handleCloseMenu, onOpenDirectory]);\n\n  const handleCreateDirectory = useCallback(() => {\n    handleCloseMenu();\n    onCreateDirectory?.();\n  }, [handleCloseMenu, onCreateDirectory]);\n\n  const handleCloseEditor = useCallback(() => {\n    handleCloseMenu();\n    onCloseDirectory?.();\n  }, [handleCloseMenu, onCloseDirectory]);\n\n  return (\n    <>\n      <Button\n        aria-controls=\"file-menu\"\n        aria-haspopup=\"true\"\n        onClick={handleOpenMenu}\n      >\n        {t('templateEditorToolbarFileMenu.button')}\n      </Button>\n      <Menu\n        id=\"file-menu\"\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleCloseMenu}\n        getContentAnchorEl={null}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n      >\n        <MenuItem onClick={handleOpenDirectory} disabled={!onOpenDirectory}>\n          {t('templateEditorToolbarFileMenu.options.openDirectory')}\n        </MenuItem>\n        <MenuItem\n          onClick={handleCreateDirectory}\n          disabled={!onCreateDirectory}\n          divider\n        >\n          {t('templateEditorToolbarFileMenu.options.createDirectory')}\n        </MenuItem>\n        <MenuItem onClick={handleCloseEditor} disabled={!onCloseDirectory}>\n          {t('templateEditorToolbarFileMenu.options.closeEditor')}\n        </MenuItem>\n      </Menu>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA0BO,SAAS,8BAA8B,KAI3C,EAAA;AACD,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAmB,EAAA,gBAAA,EAAqB,GAAA,KAAA;AACjE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AAEjE,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,KAAyC,KAAA;AACxC,MAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,GAClB,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAM,MAAA,mBAAA,GAAsB,YAAY,MAAM;AAC5C,IAAgB,eAAA,EAAA;AAChB,IAAkB,eAAA,IAAA;AAAA,GACjB,EAAA,CAAC,eAAiB,EAAA,eAAe,CAAC,CAAA;AAErC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAgB,eAAA,EAAA;AAChB,IAAoB,iBAAA,IAAA;AAAA,GACnB,EAAA,CAAC,eAAiB,EAAA,iBAAiB,CAAC,CAAA;AAEvC,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAgB,eAAA,EAAA;AAChB,IAAmB,gBAAA,IAAA;AAAA,GAClB,EAAA,CAAC,eAAiB,EAAA,gBAAgB,CAAC,CAAA;AAEtC,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,eAAc,EAAA,WAAA;AAAA,MACd,eAAc,EAAA,MAAA;AAAA,MACd,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,EAAE,sCAAsC;AAAA,GAE3C,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,WAAA;AAAA,MACH,QAAA;AAAA,MACA,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAS,EAAA,eAAA;AAAA,MACT,kBAAoB,EAAA,IAAA;AAAA,MACpB,YAAc,EAAA;AAAA,QACZ,QAAU,EAAA,QAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,QAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA;AAAA;AACd,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,YAAS,OAAS,EAAA,mBAAA,EAAqB,UAAU,CAAC,eAAA,EAAA,EAChD,CAAE,CAAA,qDAAqD,CAC1D,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,qBAAA;AAAA,QACT,UAAU,CAAC,iBAAA;AAAA,QACX,OAAO,EAAA;AAAA,OAAA;AAAA,MAEN,EAAE,uDAAuD;AAAA,KAC5D;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,YAAS,OAAS,EAAA,iBAAA,EAAmB,UAAU,CAAC,gBAAA,EAAA,EAC9C,CAAE,CAAA,mDAAmD,CACxD;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateEditorToolbarFileMenu.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { MouseEvent, useCallback, useState } from 'react';\n\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\n\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport function TemplateEditorToolbarFileMenu(props: {\n  onOpenDirectory?: () => void;\n  onCreateDirectory?: () => void;\n  onCloseDirectory?: () => void;\n}) {\n  const { onOpenDirectory, onCreateDirectory, onCloseDirectory } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleOpenMenu = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setAnchorEl(event.currentTarget);\n    },\n    [setAnchorEl],\n  );\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, [setAnchorEl]);\n\n  const handleOpenDirectory = useCallback(() => {\n    handleCloseMenu();\n    onOpenDirectory?.();\n  }, [handleCloseMenu, onOpenDirectory]);\n\n  const handleCreateDirectory = useCallback(() => {\n    handleCloseMenu();\n    onCreateDirectory?.();\n  }, [handleCloseMenu, onCreateDirectory]);\n\n  const handleCloseEditor = useCallback(() => {\n    handleCloseMenu();\n    onCloseDirectory?.();\n  }, [handleCloseMenu, onCloseDirectory]);\n\n  return (\n    <>\n      <Button\n        aria-controls=\"file-menu\"\n        aria-haspopup=\"true\"\n        onClick={handleOpenMenu}\n      >\n        {t('templateEditorToolbarFileMenu.button')}\n      </Button>\n      <Menu\n        id=\"file-menu\"\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleCloseMenu}\n        getContentAnchorEl={null}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n      >\n        <MenuItem onClick={handleOpenDirectory} disabled={!onOpenDirectory}>\n          {t('templateEditorToolbarFileMenu.options.openDirectory')}\n        </MenuItem>\n        <MenuItem\n          onClick={handleCreateDirectory}\n          disabled={!onCreateDirectory}\n          divider\n        >\n          {t('templateEditorToolbarFileMenu.options.createDirectory')}\n        </MenuItem>\n        <MenuItem onClick={handleCloseEditor} disabled={!onCloseDirectory}>\n          {t('templateEditorToolbarFileMenu.options.closeEditor')}\n        </MenuItem>\n      </Menu>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA0BO,SAAS,8BAA8B,KAI3C,EAAA;AACD,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAmB,EAAA,gBAAA,EAAqB,GAAA,KAAA;AACjE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AAEjE,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,KAAyC,KAAA;AACxC,MAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,GAClB,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAM,MAAA,mBAAA,GAAsB,YAAY,MAAM;AAC5C,IAAgB,eAAA,EAAA;AAChB,IAAkB,eAAA,IAAA;AAAA,GACjB,EAAA,CAAC,eAAiB,EAAA,eAAe,CAAC,CAAA;AAErC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAgB,eAAA,EAAA;AAChB,IAAoB,iBAAA,IAAA;AAAA,GACnB,EAAA,CAAC,eAAiB,EAAA,iBAAiB,CAAC,CAAA;AAEvC,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAgB,eAAA,EAAA;AAChB,IAAmB,gBAAA,IAAA;AAAA,GAClB,EAAA,CAAC,eAAiB,EAAA,gBAAgB,CAAC,CAAA;AAEtC,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,eAAc,EAAA,WAAA;AAAA,QACd,eAAc,EAAA,MAAA;AAAA,QACd,OAAS,EAAA,cAAA;AAAA,QAER,YAAE,sCAAsC;AAAA;AAAA,KAC3C;AAAA,oBACA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,WAAA;AAAA,QACH,QAAA;AAAA,QACA,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,QACtB,OAAS,EAAA,eAAA;AAAA,QACT,kBAAoB,EAAA,IAAA;AAAA,QACpB,YAAc,EAAA;AAAA,UACZ,QAAU,EAAA,QAAA;AAAA,UACV,UAAY,EAAA;AAAA,SACd;AAAA,QACA,eAAiB,EAAA;AAAA,UACf,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA;AAAA,SACd;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,SAAS,mBAAqB,EAAA,QAAA,EAAU,CAAC,eAChD,EAAA,QAAA,EAAA,CAAA,CAAE,qDAAqD,CAC1D,EAAA,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,OAAS,EAAA,qBAAA;AAAA,cACT,UAAU,CAAC,iBAAA;AAAA,cACX,OAAO,EAAA,IAAA;AAAA,cAEN,YAAE,uDAAuD;AAAA;AAAA,WAC5D;AAAA,0BACA,GAAA,CAAC,YAAS,OAAS,EAAA,iBAAA,EAAmB,UAAU,CAAC,gBAAA,EAC9C,QAAE,EAAA,CAAA,CAAA,mDAAmD,CACxD,EAAA;AAAA;AAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
@@ -39,45 +40,48 @@ function TemplateEditorToolbarTemplatesMenu(props) {
     },
     [handleCloseMenu, onSelectOption]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      "aria-controls": "templates-menu",
-      "aria-haspopup": "true",
-      onClick: handleOpenMenu
-    },
-    t("templateEditorToolbarTemplatesMenu.button")
-  ), /* @__PURE__ */ React.createElement(
-    Menu,
-    {
-      id: "templates-menu",
-      anchorEl,
-      open: Boolean(anchorEl),
-      onClose: handleCloseMenu,
-      getContentAnchorEl: null,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      PaperProps: {
-        className: classes.menu
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-controls": "templates-menu",
+        "aria-haspopup": "true",
+        onClick: handleOpenMenu,
+        children: t("templateEditorToolbarTemplatesMenu.button")
       }
-    },
-    options.map((option, index) => /* @__PURE__ */ React.createElement(
-      MenuItem,
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
       {
-        key: index,
-        selected: isSelectedOption(option),
-        "aria-selected": isSelectedOption(option),
-        onClick: () => handleSelectOption(option)
-      },
-      option.label
-    ))
-  ));
+        id: "templates-menu",
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleCloseMenu,
+        getContentAnchorEl: null,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        PaperProps: {
+          className: classes.menu
+        },
+        children: options.map((option, index) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            selected: isSelectedOption(option),
+            "aria-selected": isSelectedOption(option),
+            onClick: () => handleSelectOption(option),
+            children: option.label
+          },
+          index
+        ))
+      }
+    )
+  ] });
 }
 
 export { TemplateEditorToolbarTemplatesMenu };