@red-hat-developer-hub/backstage-plugin-global-floating-action-button 1.9.2 → 1.9.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @red-hat-developer-hub/backstage-plugin-global-floating-action-button
 
+## 1.9.3
+
+### Patch Changes
+
+- 4b07772: Translations updated for de/es/fr/it/ja
+- 6e7d784: Replace JSS `makeStyles` with MUI `sx` props to prevent CSS class name collisions with other dynamically loaded plugins in RHDH.
+
 ## 1.9.2
 
 ### Patch Changes

package/dist/components/CustomFab.esm.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNavigate } from 'react-router-dom';
-import { makeStyles } from '@mui/styles';
 import Fab from '@mui/material/Fab';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
@@ -10,9 +9,6 @@ import { Slot } from '../types.esm.js';
 import { getSlotOptions } from '../utils.esm.js';
 import { getTranslatedTextWithFallback } from '../utils/translationUtils.esm.js';
 
-const useStyles = makeStyles(() => ({
-  openInNew: { paddingBottom: "5px", paddingTop: "3px" }
-}));
 const FABLabel = ({
   label,
   slot,
@@ -20,14 +16,17 @@ const FABLabel = ({
   icon,
   order
 }) => {
-  const styles = useStyles();
   const marginStyle = getSlotOptions(slot).margin;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showExternalIcon && /* @__PURE__ */ jsx(
       OpenInNewIcon,
       {
-        className: styles.openInNew,
-        sx: { ...marginStyle, order: order.externalIcon }
+        sx: {
+          pb: "5px",
+          pt: "3px",
+          ...marginStyle,
+          order: order.externalIcon
+        }
       }
     ),
     label && /* @__PURE__ */ jsx(
@@ -48,7 +47,7 @@ const FABLabel = ({
 const CustomFab = ({
   actionButton,
   size,
-  className,
+  sx,
   t
 }) => {
   const navigate = useNavigate();
@@ -90,7 +89,7 @@ const CustomFab = ({
         Fab,
         {
           ...newWindow ? { target: "_blank", rel: "noopener" } : {},
-          className,
+          sx,
           style: {
             color: actionButton?.iconColor || "#1f1f1f",
             backgroundColor: actionButton.color ? "" : "white"

package/dist/components/CustomFab.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomFab.esm.js","sources":["../../src/components/CustomFab.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 type { ReactElement } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { makeStyles } from '@mui/styles';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew';\nimport { FabIcon } from './FabIcon';\nimport { FloatingActionButton, Slot } from '../types';\nimport { getSlotOptions } from '../utils';\nimport { getTranslatedTextWithFallback } from '../utils/translationUtils';\nimport { TranslationFunction } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from '../translations';\n\nconst useStyles = makeStyles(() => ({\n  openInNew: { paddingBottom: '5px', paddingTop: '3px' },\n}));\n\nconst FABLabel = ({\n  label,\n  slot,\n  showExternalIcon,\n  icon,\n  order,\n}: {\n  label: string;\n  slot: Slot;\n  showExternalIcon: boolean;\n  icon?: string | ReactElement;\n  order: { externalIcon?: number; icon?: number };\n}) => {\n  const styles = useStyles();\n  const marginStyle = getSlotOptions(slot).margin;\n  return (\n    <>\n      {showExternalIcon && (\n        <OpenInNewIcon\n          className={styles.openInNew}\n          sx={{ ...marginStyle, order: order.externalIcon }}\n        />\n      )}\n      {label && (\n        <Typography\n          sx={{\n            ...marginStyle,\n            color: '#151515',\n            order: 2,\n            textTransform: 'none',\n          }}\n        >\n          {label}\n        </Typography>\n      )}\n      {icon && (\n        <Typography sx={{ mb: -1, order: order.icon }}>\n          <FabIcon icon={icon} />\n        </Typography>\n      )}\n    </>\n  );\n};\n\nexport const CustomFab = ({\n  actionButton,\n  size,\n  className,\n  t,\n}: {\n  actionButton: FloatingActionButton;\n  size?: 'small' | 'medium' | 'large';\n  className?: string;\n  t: TranslationFunction<typeof globalFloatingActionButtonTranslationRef.T>;\n}) => {\n  const navigate = useNavigate();\n  const isExternalUri = (uri: string) => /^([a-z+.-]+):/.test(uri);\n  const isExternal = isExternalUri(actionButton.to!);\n  const newWindow = isExternal && !!/^https?:/.exec(actionButton.to!);\n  const navigateTo = () =>\n    actionButton.to && !isExternal ? navigate(actionButton.to) : '';\n\n  const resolvedLabel = getTranslatedTextWithFallback(\n    t,\n    actionButton.labelKey,\n    actionButton.label,\n  );\n  const resolvedTooltip = actionButton.toolTip\n    ? getTranslatedTextWithFallback(\n        t,\n        actionButton.toolTipKey,\n        actionButton.toolTip,\n      )\n    : undefined;\n\n  if (!resolvedLabel) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Label is missing from your FAB component. A label is required for the aria-label attribute.',\n      actionButton,\n    );\n    return null;\n  }\n\n  const labelText =\n    (resolvedLabel || '').length > 20\n      ? `${resolvedLabel.slice(0, resolvedLabel.length)}...`\n      : resolvedLabel;\n\n  const getColor = () => {\n    if (actionButton.color) {\n      return actionButton.color;\n    }\n    return undefined;\n  };\n\n  const displayOnRight =\n    actionButton.slot === Slot.PAGE_END || !actionButton.slot;\n\n  return (\n    <Tooltip\n      title={resolvedTooltip}\n      placement={getSlotOptions(actionButton.slot).tooltipDirection}\n    >\n      <Fab\n        {...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}\n        className={className}\n        style={{\n          color: actionButton?.iconColor || '#1f1f1f',\n          backgroundColor: actionButton.color ? '' : 'white',\n        }}\n        variant={\n          actionButton.showLabel || isExternal || !actionButton.icon\n            ? 'extended'\n            : 'circular'\n        }\n        size={size || actionButton.size || 'medium'}\n        color={getColor()}\n        aria-label={resolvedLabel}\n        data-testid={(resolvedLabel || '')\n          .replace(' ', '-')\n          .toLocaleLowerCase('en-US')}\n        onClick={actionButton.onClick || navigateTo}\n        {...(isExternal ? { href: actionButton.to } : {})}\n      >\n        <FABLabel\n          showExternalIcon={isExternal}\n          icon={actionButton.icon}\n          label={actionButton.showLabel || !actionButton.icon ? labelText : ''}\n          order={\n            displayOnRight\n              ? { externalIcon: isExternal ? 1 : -1, icon: 3 }\n              : { externalIcon: isExternal ? 3 : -1, icon: 1 }\n          }\n          slot={actionButton.slot || Slot.PAGE_END}\n        />\n      </Fab>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomFab.esm.js","sources":["../../src/components/CustomFab.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 type { ReactElement } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew';\nimport { FabIcon } from './FabIcon';\nimport { FloatingActionButton, Slot } from '../types';\nimport { getSlotOptions } from '../utils';\nimport { getTranslatedTextWithFallback } from '../utils/translationUtils';\nimport { TranslationFunction } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from '../translations';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nconst FABLabel = ({\n  label,\n  slot,\n  showExternalIcon,\n  icon,\n  order,\n}: {\n  label: string;\n  slot: Slot;\n  showExternalIcon: boolean;\n  icon?: string | ReactElement;\n  order: { externalIcon?: number; icon?: number };\n}) => {\n  const marginStyle = getSlotOptions(slot).margin;\n  return (\n    <>\n      {showExternalIcon && (\n        <OpenInNewIcon\n          sx={{\n            pb: '5px',\n            pt: '3px',\n            ...marginStyle,\n            order: order.externalIcon,\n          }}\n        />\n      )}\n      {label && (\n        <Typography\n          sx={{\n            ...marginStyle,\n            color: '#151515',\n            order: 2,\n            textTransform: 'none',\n          }}\n        >\n          {label}\n        </Typography>\n      )}\n      {icon && (\n        <Typography sx={{ mb: -1, order: order.icon }}>\n          <FabIcon icon={icon} />\n        </Typography>\n      )}\n    </>\n  );\n};\n\nexport const CustomFab = ({\n  actionButton,\n  size,\n  sx,\n  t,\n}: {\n  actionButton: FloatingActionButton;\n  size?: 'small' | 'medium' | 'large';\n  sx?: SxProps<Theme>;\n  t: TranslationFunction<typeof globalFloatingActionButtonTranslationRef.T>;\n}) => {\n  const navigate = useNavigate();\n  const isExternalUri = (uri: string) => /^([a-z+.-]+):/.test(uri);\n  const isExternal = isExternalUri(actionButton.to!);\n  const newWindow = isExternal && !!/^https?:/.exec(actionButton.to!);\n  const navigateTo = () =>\n    actionButton.to && !isExternal ? navigate(actionButton.to) : '';\n\n  const resolvedLabel = getTranslatedTextWithFallback(\n    t,\n    actionButton.labelKey,\n    actionButton.label,\n  );\n  const resolvedTooltip = actionButton.toolTip\n    ? getTranslatedTextWithFallback(\n        t,\n        actionButton.toolTipKey,\n        actionButton.toolTip,\n      )\n    : undefined;\n\n  if (!resolvedLabel) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Label is missing from your FAB component. A label is required for the aria-label attribute.',\n      actionButton,\n    );\n    return null;\n  }\n\n  const labelText =\n    (resolvedLabel || '').length > 20\n      ? `${resolvedLabel.slice(0, resolvedLabel.length)}...`\n      : resolvedLabel;\n\n  const getColor = () => {\n    if (actionButton.color) {\n      return actionButton.color;\n    }\n    return undefined;\n  };\n\n  const displayOnRight =\n    actionButton.slot === Slot.PAGE_END || !actionButton.slot;\n\n  return (\n    <Tooltip\n      title={resolvedTooltip}\n      placement={getSlotOptions(actionButton.slot).tooltipDirection}\n    >\n      <Fab\n        {...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}\n        sx={sx}\n        style={{\n          color: actionButton?.iconColor || '#1f1f1f',\n          backgroundColor: actionButton.color ? '' : 'white',\n        }}\n        variant={\n          actionButton.showLabel || isExternal || !actionButton.icon\n            ? 'extended'\n            : 'circular'\n        }\n        size={size || actionButton.size || 'medium'}\n        color={getColor()}\n        aria-label={resolvedLabel}\n        data-testid={(resolvedLabel || '')\n          .replace(' ', '-')\n          .toLocaleLowerCase('en-US')}\n        onClick={actionButton.onClick || navigateTo}\n        {...(isExternal ? { href: actionButton.to } : {})}\n      >\n        <FABLabel\n          showExternalIcon={isExternal}\n          icon={actionButton.icon}\n          label={actionButton.showLabel || !actionButton.icon ? labelText : ''}\n          order={\n            displayOnRight\n              ? { externalIcon: isExternal ? 1 : -1, icon: 3 }\n              : { externalIcon: isExternal ? 3 : -1, icon: 1 }\n          }\n          slot={actionButton.slot || Slot.PAGE_END}\n        />\n      </Fab>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FABWithSubmenu.esm.js

@@ -1,8 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import classnames from 'classnames';
 import { useLocation } from 'react-router-dom';
-import { makeStyles } from '@mui/styles';
 import Fab from '@mui/material/Fab';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
@@ -15,30 +13,12 @@ import Typography from '@mui/material/Typography';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
 import { getTranslatedTextWithFallback } from '../utils/translationUtils.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  fabContainer: {
-    zIndex: 200,
-    display: "flex",
-    position: "fixed",
-    alignItems: "center",
-    gap: "10px"
-  },
-  button: {
-    zIndex: 205,
-    color: theme && Object.keys(theme).length > 0 ? theme.palette.grey[500] : "#9e9e9e"
-  },
-  menuButtonStyle: {
-    color: "white"
-  }
-}));
 const FABWithSubmenu = ({
-  className,
+  sx: sxProp,
   fabs,
   slot
 }) => {
   const containerRef = useRef(null);
-  const styles = useStyles();
-  const fab = useStyles();
   const { pathname } = useLocation();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   useEffect(() => {
@@ -59,10 +39,17 @@ const FABWithSubmenu = ({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: classnames(fab.fabContainer, className),
-      sx: {
-        flexDirection: "column-reverse"
-      },
+      sx: [
+        {
+          zIndex: 200,
+          display: "flex",
+          position: "fixed",
+          alignItems: "center",
+          gap: "10px",
+          flexDirection: "column-reverse"
+        },
+        ...Array.isArray(sxProp) ? sxProp : [sxProp]
+      ],
       id: "floating-button-with-submenu",
       "data-testid": "floating-button-with-submenu",
       children: [
@@ -82,7 +69,7 @@ const FABWithSubmenu = ({
                   "aria-label": "Menu",
                   variant: "circular",
                   sx: { zIndex: 1e3 },
-                  children: isMenuOpen ? /* @__PURE__ */ jsx(CloseIcon, { className: styles.menuButtonStyle }) : /* @__PURE__ */ jsx(MenuIcon, { className: styles.menuButtonStyle })
+                  children: isMenuOpen ? /* @__PURE__ */ jsx(CloseIcon, { sx: { color: "white" } }) : /* @__PURE__ */ jsx(MenuIcon, { sx: { color: "white" } })
                 }
               )
             ] })
@@ -104,7 +91,10 @@ const FABWithSubmenu = ({
                   actionButton: fb,
                   t,
                   size: "medium",
-                  className: styles.button
+                  sx: (theme) => ({
+                    zIndex: 205,
+                    color: theme && Object.keys(theme).length > 0 ? theme.palette.grey[500] : "#9e9e9e"
+                  })
                 },
                 fb.label
               ) })

package/dist/components/FABWithSubmenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FABWithSubmenu.esm.js","sources":["../../src/components/FABWithSubmenu.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 { useRef, useState, useEffect } from 'react';\nimport classnames from 'classnames';\n\nimport { useLocation } from 'react-router-dom';\nimport { makeStyles } from '@mui/styles';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport Box from '@mui/material/Box';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport Slide from '@mui/material/Slide';\nimport { CustomFab } from './CustomFab';\nimport { getSlotOptions } from '../utils';\nimport { FloatingActionButton, Slot } from '../types';\nimport Typography from '@mui/material/Typography';\nimport { useTranslation } from '../hooks/useTranslation';\nimport { getTranslatedTextWithFallback } from '../utils/translationUtils';\n\nconst useStyles = makeStyles(theme => ({\n  fabContainer: {\n    zIndex: 200,\n    display: 'flex',\n    position: 'fixed',\n    alignItems: 'center',\n    gap: '10px',\n  },\n  button: {\n    zIndex: 205,\n    color:\n      theme && Object.keys(theme).length > 0\n        ? theme.palette.grey[500]\n        : '#9e9e9e',\n  },\n  menuButtonStyle: {\n    color: 'white',\n  },\n}));\n\nexport const FABWithSubmenu = ({\n  className,\n  fabs,\n  slot,\n}: {\n  fabs: FloatingActionButton[];\n  slot: Slot;\n  className?: string;\n}) => {\n  const containerRef = useRef<HTMLElement>(null);\n  const styles = useStyles();\n  const fab = useStyles();\n  const { pathname } = useLocation();\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  useEffect(() => {\n    return () => {\n      setIsMenuOpen(false);\n    };\n  }, [pathname]);\n\n  const handleClick = () => {\n    if (isMenuOpen) {\n      setTimeout(() => {\n        setIsMenuOpen(false);\n      }, 300);\n    } else {\n      setIsMenuOpen(true);\n    }\n  };\n  // This hook call is necessary to prevent infinite re-render loops\n  // The translation context provides stability to the component's render cycle\n  const { t } = useTranslation();\n  return (\n    <Box\n      className={classnames(fab.fabContainer, className)}\n      sx={{\n        flexDirection: 'column-reverse',\n      }}\n      id=\"floating-button-with-submenu\"\n      data-testid=\"floating-button-with-submenu\"\n    >\n      <Tooltip\n        title={getTranslatedTextWithFallback(t, 'fab.menu.tooltip', 'Menu')}\n        placement={getSlotOptions(slot).tooltipDirection}\n      >\n        <Typography>\n          <Box ref={containerRef} sx={{ overflow: 'hidden' }} />\n          <Fab\n            size=\"medium\"\n            color=\"info\"\n            onClick={handleClick}\n            aria-label=\"Menu\"\n            variant=\"circular\"\n            sx={{ zIndex: 1000 }}\n          >\n            {isMenuOpen ? (\n              <CloseIcon className={styles.menuButtonStyle} />\n            ) : (\n              <MenuIcon className={styles.menuButtonStyle} />\n            )}\n          </Fab>\n        </Typography>\n      </Tooltip>\n      {fabs?.map(fb => {\n        return (\n          <Slide\n            key={fb.label}\n            direction=\"up\"\n            container={containerRef?.current}\n            in={isMenuOpen}\n            mountOnEnter\n            unmountOnExit\n            timeout={500}\n          >\n            <Box>\n              <CustomFab\n                actionButton={fb}\n                t={t}\n                size=\"medium\"\n                key={fb.label}\n                className={styles.button}\n              />\n            </Box>\n          </Slide>\n        );\n      })}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmCA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,YAAc,EAAA;AAAA,IACZ,MAAQ,EAAA,GAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,GAAK,EAAA;AAAA,GACP;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,MAAQ,EAAA,GAAA;AAAA,IACR,KACE,EAAA,KAAA,IAAS,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,MAAS,GAAA,CAAA,GACjC,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,GAAG,CACtB,GAAA;AAAA,GACR;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,KAAO,EAAA;AAAA;AAEX,CAAE,CAAA,CAAA;AAEK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAIM,KAAA;AACJ,EAAM,MAAA,YAAA,GAAe,OAAoB,IAAI,CAAA;AAC7C,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,MAAM,SAAU,EAAA;AACtB,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,WAAY,EAAA;AACjC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA,SAClB,GAAG,CAAA;AAAA,KACD,MAAA;AACL,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA;AACpB,GACF;AAGA,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,UAAA,CAAW,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAAA,MACjD,EAAI,EAAA;AAAA,QACF,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,EAAG,EAAA,8BAAA;AAAA,MACH,aAAY,EAAA,8BAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA,6BAAA,CAA8B,CAAG,EAAA,kBAAA,EAAoB,MAAM,CAAA;AAAA,YAClE,SAAA,EAAW,cAAe,CAAA,IAAI,CAAE,CAAA,gBAAA;AAAA,YAEhC,+BAAC,UACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,OAAI,GAAK,EAAA,YAAA,EAAc,IAAI,EAAE,QAAA,EAAU,UAAY,EAAA,CAAA;AAAA,8BACpD,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,IAAK,EAAA,QAAA;AAAA,kBACL,KAAM,EAAA,MAAA;AAAA,kBACN,OAAS,EAAA,WAAA;AAAA,kBACT,YAAW,EAAA,MAAA;AAAA,kBACX,OAAQ,EAAA,UAAA;AAAA,kBACR,EAAA,EAAI,EAAE,MAAA,EAAQ,GAAK,EAAA;AAAA,kBAElB,QAAA,EAAA,UAAA,mBACE,GAAA,CAAA,SAAA,EAAA,EAAU,SAAW,EAAA,MAAA,CAAO,eAAiB,EAAA,CAAA,mBAE7C,GAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,MAAA,CAAO,eAAiB,EAAA;AAAA;AAAA;AAEjD,aACF,EAAA;AAAA;AAAA,SACF;AAAA,QACC,IAAA,EAAM,IAAI,CAAM,EAAA,KAAA;AACf,UACE,uBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cAEC,SAAU,EAAA,IAAA;AAAA,cACV,WAAW,YAAc,EAAA,OAAA;AAAA,cACzB,EAAI,EAAA,UAAA;AAAA,cACJ,YAAY,EAAA,IAAA;AAAA,cACZ,aAAa,EAAA,IAAA;AAAA,cACb,OAAS,EAAA,GAAA;AAAA,cAET,8BAAC,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,SAAA;AAAA,gBAAA;AAAA,kBACC,YAAc,EAAA,EAAA;AAAA,kBACd,CAAA;AAAA,kBACA,IAAK,EAAA,QAAA;AAAA,kBAEL,WAAW,MAAO,CAAA;AAAA,iBAAA;AAAA,gBADb,EAAG,CAAA;AAAA,eAGZ,EAAA;AAAA,aAAA;AAAA,YAhBK,EAAG,CAAA;AAAA,WAiBV;AAAA,SAEH;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"FABWithSubmenu.esm.js","sources":["../../src/components/FABWithSubmenu.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 { useRef, useState, useEffect } from 'react';\n\nimport { useLocation } from 'react-router-dom';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport Box from '@mui/material/Box';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport Slide from '@mui/material/Slide';\nimport { CustomFab } from './CustomFab';\nimport { getSlotOptions } from '../utils';\nimport { FloatingActionButton, Slot } from '../types';\nimport Typography from '@mui/material/Typography';\nimport { useTranslation } from '../hooks/useTranslation';\nimport { getTranslatedTextWithFallback } from '../utils/translationUtils';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport const FABWithSubmenu = ({\n  sx: sxProp,\n  fabs,\n  slot,\n}: {\n  fabs: FloatingActionButton[];\n  slot: Slot;\n  sx?: SxProps<Theme>;\n}) => {\n  const containerRef = useRef<HTMLElement>(null);\n  const { pathname } = useLocation();\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  useEffect(() => {\n    return () => {\n      setIsMenuOpen(false);\n    };\n  }, [pathname]);\n\n  const handleClick = () => {\n    if (isMenuOpen) {\n      setTimeout(() => {\n        setIsMenuOpen(false);\n      }, 300);\n    } else {\n      setIsMenuOpen(true);\n    }\n  };\n  // This hook call is necessary to prevent infinite re-render loops\n  // The translation context provides stability to the component's render cycle\n  const { t } = useTranslation();\n  return (\n    <Box\n      sx={[\n        {\n          zIndex: 200,\n          display: 'flex',\n          position: 'fixed',\n          alignItems: 'center',\n          gap: '10px',\n          flexDirection: 'column-reverse',\n        },\n        ...(Array.isArray(sxProp) ? sxProp : [sxProp]),\n      ]}\n      id=\"floating-button-with-submenu\"\n      data-testid=\"floating-button-with-submenu\"\n    >\n      <Tooltip\n        title={getTranslatedTextWithFallback(t, 'fab.menu.tooltip', 'Menu')}\n        placement={getSlotOptions(slot).tooltipDirection}\n      >\n        <Typography>\n          <Box ref={containerRef} sx={{ overflow: 'hidden' }} />\n          <Fab\n            size=\"medium\"\n            color=\"info\"\n            onClick={handleClick}\n            aria-label=\"Menu\"\n            variant=\"circular\"\n            sx={{ zIndex: 1000 }}\n          >\n            {isMenuOpen ? (\n              <CloseIcon sx={{ color: 'white' }} />\n            ) : (\n              <MenuIcon sx={{ color: 'white' }} />\n            )}\n          </Fab>\n        </Typography>\n      </Tooltip>\n      {fabs?.map(fb => {\n        return (\n          <Slide\n            key={fb.label}\n            direction=\"up\"\n            container={containerRef?.current}\n            in={isMenuOpen}\n            mountOnEnter\n            unmountOnExit\n            timeout={500}\n          >\n            <Box>\n              <CustomFab\n                actionButton={fb}\n                t={t}\n                size=\"medium\"\n                key={fb.label}\n                sx={theme => ({\n                  zIndex: 205,\n                  color:\n                    theme && Object.keys(theme).length > 0\n                      ? theme.palette.grey[500]\n                      : '#9e9e9e',\n                })}\n              />\n            </Box>\n          </Slide>\n        );\n      })}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FloatingButton.esm.js

@@ -2,36 +2,35 @@ import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
-import { makeStyles } from '@mui/styles';
+import Box from '@mui/material/Box';
 import { FABWithSubmenu } from './FABWithSubmenu.esm.js';
 import { CustomFab } from './CustomFab.esm.js';
+import { Slot } from '../types.esm.js';
 import { filterAndSortButtons } from '../utils.esm.js';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  "page-end": {
+const slotSx = {
+  [Slot.PAGE_END]: (theme) => ({
     bottom: `calc(${theme?.spacing?.(2) ?? "16px"} + 1.5em)`,
     right: `calc(${theme?.spacing?.(2) ?? "16px"} + 1.5em)`,
     alignItems: "end",
-    // When drawer is docked, adjust margin
     ".docked-drawer-open &": {
       transition: "margin-right 0.3s ease",
-      marginRight: "var(--docked-drawer-width, 500px) "
+      marginRight: "var(--docked-drawer-width, 500px)"
     }
-  },
-  "bottom-left": {
+  }),
+  [Slot.BOTTOM_LEFT]: (theme) => ({
     bottom: `calc(${theme?.spacing?.(2) ?? "16px"} + 1.5em)`,
     paddingLeft: theme?.spacing?.(2) ?? "16px",
     alignItems: "start"
-  }
-}));
+  })
+};
 const FloatingButton = ({
   floatingButtons,
   slot
 }) => {
   const timeoutRef = useRef();
   const { pathname } = useLocation();
-  const fabButton = useStyles();
   const [targetElement, setTargetElement] = useState(null);
   const { t } = useTranslation();
   useEffect(() => {
@@ -57,17 +56,19 @@ const FloatingButton = ({
   }
   let fabDiv;
   if (fabs.length > 1) {
-    fabDiv = /* @__PURE__ */ jsx(FABWithSubmenu, { className: fabButton[slot], fabs, slot });
+    fabDiv = /* @__PURE__ */ jsx(FABWithSubmenu, { sx: slotSx[slot], fabs, slot });
   } else {
     fabDiv = /* @__PURE__ */ jsx(
-      "div",
+      Box,
       {
-        style: {
-          zIndex: 200,
-          display: "flex",
-          position: "fixed"
-        },
-        className: fabButton[slot],
+        sx: [
+          {
+            zIndex: 200,
+            display: "flex",
+            position: "fixed"
+          },
+          ...Array.isArray(slotSx[slot]) ? slotSx[slot] : [slotSx[slot]]
+        ],
         id: "floating-button",
         "data-testid": "floating-button",
         children: /* @__PURE__ */ jsx(

package/dist/components/FloatingButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButton.esm.js","sources":["../../src/components/FloatingButton.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 { useRef, useState, useEffect, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useLocation } from 'react-router-dom';\n\nimport { makeStyles } from '@mui/styles';\nimport { FABWithSubmenu } from './FABWithSubmenu';\nimport { CustomFab } from './CustomFab';\nimport { FloatingActionButton, Slot } from '../types';\nimport { filterAndSortButtons } from '../utils';\nimport { useTranslation } from '../hooks/useTranslation';\n\nconst useStyles = makeStyles(theme => ({\n  'page-end': {\n    bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    alignItems: 'end',\n\n    // When drawer is docked, adjust margin\n    '.docked-drawer-open &': {\n      transition: 'margin-right 0.3s ease',\n      marginRight: 'var(--docked-drawer-width, 500px) ',\n    },\n  },\n  'bottom-left': {\n    bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    paddingLeft: theme?.spacing?.(2) ?? '16px',\n    alignItems: 'start',\n  },\n}));\n\nexport const FloatingButton = ({\n  floatingButtons,\n  slot,\n}: {\n  floatingButtons: FloatingActionButton[];\n  slot: Slot;\n}) => {\n  const timeoutRef = useRef<NodeJS.Timeout>();\n  const { pathname } = useLocation();\n  const fabButton = useStyles();\n  const [targetElement, setTargetElement] = useState<Element | null>(null);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    const checkTargetElement = () => {\n      const element =\n        document.querySelector('[class^=\"BackstagePage-root\"]') ??\n        document.querySelector('main');\n      if (element) {\n        setTargetElement(element);\n      } else {\n        timeoutRef.current = setTimeout(checkTargetElement, 300);\n      }\n    };\n    checkTargetElement();\n    return () => {\n      clearTimeout(timeoutRef.current);\n    };\n  }, [pathname, targetElement]);\n\n  const fabs = useMemo(\n    () => filterAndSortButtons(floatingButtons, pathname),\n    [floatingButtons, pathname],\n  );\n\n  if (fabs?.length === 0) {\n    return null;\n  }\n\n  let fabDiv;\n  if (fabs.length > 1) {\n    fabDiv = (\n      <FABWithSubmenu className={fabButton[slot]} fabs={fabs} slot={slot} />\n    );\n  } else {\n    fabDiv = (\n      <div\n        style={{\n          zIndex: 200,\n          display: 'flex',\n          position: 'fixed',\n        }}\n        className={fabButton[slot]}\n        id=\"floating-button\"\n        data-testid=\"floating-button\"\n      >\n        <CustomFab\n          actionButton={{ color: 'info', iconColor: 'white', ...fabs[0] }}\n          t={t}\n        />\n      </div>\n    );\n  }\n  return targetElement\n    ? createPortal(fabDiv, targetElement)\n    : createPortal(fabDiv, document.body);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FloatingButton.esm.js","sources":["../../src/components/FloatingButton.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 { useRef, useState, useEffect, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useLocation } from 'react-router-dom';\n\nimport Box from '@mui/material/Box';\nimport { FABWithSubmenu } from './FABWithSubmenu';\nimport { CustomFab } from './CustomFab';\nimport { FloatingActionButton, Slot } from '../types';\nimport { filterAndSortButtons } from '../utils';\nimport { useTranslation } from '../hooks/useTranslation';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nconst slotSx: Record<Slot, SxProps<Theme>> = {\n  [Slot.PAGE_END]: theme => ({\n    bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    alignItems: 'end',\n    '.docked-drawer-open &': {\n      transition: 'margin-right 0.3s ease',\n      marginRight: 'var(--docked-drawer-width, 500px)',\n    },\n  }),\n  [Slot.BOTTOM_LEFT]: theme => ({\n    bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,\n    paddingLeft: theme?.spacing?.(2) ?? '16px',\n    alignItems: 'start',\n  }),\n};\n\nexport const FloatingButton = ({\n  floatingButtons,\n  slot,\n}: {\n  floatingButtons: FloatingActionButton[];\n  slot: Slot;\n}) => {\n  const timeoutRef = useRef<NodeJS.Timeout>();\n  const { pathname } = useLocation();\n  const [targetElement, setTargetElement] = useState<Element | null>(null);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    const checkTargetElement = () => {\n      const element =\n        document.querySelector('[class^=\"BackstagePage-root\"]') ??\n        document.querySelector('main');\n      if (element) {\n        setTargetElement(element);\n      } else {\n        timeoutRef.current = setTimeout(checkTargetElement, 300);\n      }\n    };\n    checkTargetElement();\n    return () => {\n      clearTimeout(timeoutRef.current);\n    };\n  }, [pathname, targetElement]);\n\n  const fabs = useMemo(\n    () => filterAndSortButtons(floatingButtons, pathname),\n    [floatingButtons, pathname],\n  );\n\n  if (fabs?.length === 0) {\n    return null;\n  }\n\n  let fabDiv;\n  if (fabs.length > 1) {\n    fabDiv = <FABWithSubmenu sx={slotSx[slot]} fabs={fabs} slot={slot} />;\n  } else {\n    fabDiv = (\n      <Box\n        sx={[\n          {\n            zIndex: 200,\n            display: 'flex',\n            position: 'fixed',\n          },\n          ...(Array.isArray(slotSx[slot]) ? slotSx[slot] : [slotSx[slot]]),\n        ]}\n        id=\"floating-button\"\n        data-testid=\"floating-button\"\n      >\n        <CustomFab\n          actionButton={{ color: 'info', iconColor: 'white', ...fabs[0] }}\n          t={t}\n        />\n      </Box>\n    );\n  }\n  return targetElement\n    ? createPortal(fabDiv, targetElement)\n    : createPortal(fabDiv, document.body);\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA4BA,MAAM,MAAuC,GAAA;AAAA,EAC3C,CAAC,IAAA,CAAK,QAAQ,GAAG,CAAU,KAAA,MAAA;AAAA,IACzB,QAAQ,CAAQ,KAAA,EAAA,KAAA,EAAO,OAAU,GAAA,CAAC,KAAK,MAAM,CAAA,SAAA,CAAA;AAAA,IAC7C,OAAO,CAAQ,KAAA,EAAA,KAAA,EAAO,OAAU,GAAA,CAAC,KAAK,MAAM,CAAA,SAAA,CAAA;AAAA,IAC5C,UAAY,EAAA,KAAA;AAAA,IACZ,uBAAyB,EAAA;AAAA,MACvB,UAAY,EAAA,wBAAA;AAAA,MACZ,WAAa,EAAA;AAAA;AACf,GACF,CAAA;AAAA,EACA,CAAC,IAAA,CAAK,WAAW,GAAG,CAAU,KAAA,MAAA;AAAA,IAC5B,QAAQ,CAAQ,KAAA,EAAA,KAAA,EAAO,OAAU,GAAA,CAAC,KAAK,MAAM,CAAA,SAAA,CAAA;AAAA,IAC7C,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,CAAC,CAAK,IAAA,MAAA;AAAA,IACpC,UAAY,EAAA;AAAA,GACd;AACF,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,eAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,MAAM,aAAa,MAAuB,EAAA;AAC1C,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,WAAY,EAAA;AACjC,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAyB,IAAI,CAAA;AACvE,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,MAAM,UACJ,QAAS,CAAA,aAAA,CAAc,+BAA+B,CACtD,IAAA,QAAA,CAAS,cAAc,MAAM,CAAA;AAC/B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,gBAAA,CAAiB,OAAO,CAAA;AAAA,OACnB,MAAA;AACL,QAAW,UAAA,CAAA,OAAA,GAAU,UAAW,CAAA,kBAAA,EAAoB,GAAG,CAAA;AAAA;AACzD,KACF;AACA,IAAmB,kBAAA,EAAA;AACnB,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,KACjC;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,aAAa,CAAC,CAAA;AAE5B,EAAA,MAAM,IAAO,GAAA,OAAA;AAAA,IACX,MAAM,oBAAqB,CAAA,eAAA,EAAiB,QAAQ,CAAA;AAAA,IACpD,CAAC,iBAAiB,QAAQ;AAAA,GAC5B;AAEA,EAAI,IAAA,IAAA,EAAM,WAAW,CAAG,EAAA;AACtB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAI,IAAA,MAAA;AACJ,EAAI,IAAA,IAAA,CAAK,SAAS,CAAG,EAAA;AACnB,IAAA,MAAA,uBAAU,cAAe,EAAA,EAAA,EAAA,EAAI,OAAO,IAAI,CAAA,EAAG,MAAY,IAAY,EAAA,CAAA;AAAA,GAC9D,MAAA;AACL,IACE,MAAA,mBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF;AAAA,YACE,MAAQ,EAAA,GAAA;AAAA,YACR,OAAS,EAAA,MAAA;AAAA,YACT,QAAU,EAAA;AAAA,WACZ;AAAA,UACA,GAAI,KAAA,CAAM,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAC,CAAI,GAAA,MAAA,CAAO,IAAI,CAAA,GAAI,CAAC,MAAA,CAAO,IAAI,CAAC;AAAA,SAChE;AAAA,QACA,EAAG,EAAA,iBAAA;AAAA,QACH,aAAY,EAAA,iBAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAc,EAAE,KAAO,EAAA,MAAA,EAAQ,WAAW,OAAS,EAAA,GAAG,IAAK,CAAA,CAAC,CAAE,EAAA;AAAA,YAC9D;AAAA;AAAA;AACF;AAAA,KACF;AAAA;AAGJ,EAAO,OAAA,aAAA,GACH,aAAa,MAAQ,EAAA,aAAa,IAClC,YAAa,CAAA,MAAA,EAAQ,SAAS,IAAI,CAAA;AACxC;;;;"}

package/dist/translations/de.esm.js

@@ -5,7 +5,7 @@ const globalFloatingActionButtonTranslationDe = createTranslationMessages({
   ref: globalFloatingActionButtonTranslationRef,
   messages: {
     "fab.create.label": "Erstellen",
-    "fab.create.tooltip": "Element erstellen",
+    "fab.create.tooltip": "Entity erstellen",
     "fab.docs.label": "Dokumente",
     "fab.docs.tooltip": "Dokumentation",
     "fab.apis.label": "APIs",
@@ -15,7 +15,7 @@ const globalFloatingActionButtonTranslationDe = createTranslationMessages({
     "fab.bulkImport.label": "Massenimport",
     "fab.bulkImport.tooltip": "Mehrere Repositorys gleichzeitig registrieren",
     "fab.quay.label": "Quay",
-    "fab.quay.tooltip": "Quay Container Registry",
+    "fab.quay.tooltip": "Quay-Containerregistrierung",
     "fab.menu.tooltip": "Men\xFC"
   }
 });

package/dist/translations/de.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"de.esm.js","sources":["../../src/translations/de.ts"],"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 { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from './ref';\n\n/**\n * de translation for plugin.global-floating-action-button.\n * @public\n */\nconst globalFloatingActionButtonTranslationDe = createTranslationMessages({\n  ref: globalFloatingActionButtonTranslationRef,\n  messages: {\n    'fab.create.label': 'Erstellen',\n    'fab.create.tooltip': 'Element erstellen',\n    'fab.docs.label': 'Dokumente',\n    'fab.docs.tooltip': 'Dokumentation',\n    'fab.apis.label': 'APIs',\n    'fab.apis.tooltip': 'API-Dokumentation',\n    'fab.github.label': 'GitHub',\n    'fab.github.tooltip': 'GitHub-Repository',\n    'fab.bulkImport.label': 'Massenimport',\n    'fab.bulkImport.tooltip': 'Mehrere Repositorys gleichzeitig registrieren',\n    'fab.quay.label': 'Quay',\n    'fab.quay.tooltip': 'Quay Container Registry',\n    'fab.menu.tooltip': 'Menü',\n  },\n});\n\nexport default globalFloatingActionButtonTranslationDe;\n"],"names":[],"mappings":";;;AAuBA,MAAM,0CAA0C,yBAA0B,CAAA;AAAA,EACxE,GAAK,EAAA,wCAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,kBAAoB,EAAA,WAAA;AAAA,IACpB,oBAAsB,EAAA,mBAAA;AAAA,IACtB,gBAAkB,EAAA,WAAA;AAAA,IAClB,kBAAoB,EAAA,eAAA;AAAA,IACpB,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,mBAAA;AAAA,IACpB,kBAAoB,EAAA,QAAA;AAAA,IACpB,oBAAsB,EAAA,mBAAA;AAAA,IACtB,sBAAwB,EAAA,cAAA;AAAA,IACxB,wBAA0B,EAAA,+CAAA;AAAA,IAC1B,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,yBAAA;AAAA,IACpB,kBAAoB,EAAA;AAAA;AAExB,CAAC;;;;"}
+{"version":3,"file":"de.esm.js","sources":["../../src/translations/de.ts"],"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 { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from './ref';\n\n/**\n * de translation for plugin.global-floating-action-button.\n * @public\n */\nconst globalFloatingActionButtonTranslationDe = createTranslationMessages({\n  ref: globalFloatingActionButtonTranslationRef,\n  messages: {\n    'fab.create.label': 'Erstellen',\n    'fab.create.tooltip': 'Entity erstellen',\n    'fab.docs.label': 'Dokumente',\n    'fab.docs.tooltip': 'Dokumentation',\n    'fab.apis.label': 'APIs',\n    'fab.apis.tooltip': 'API-Dokumentation',\n    'fab.github.label': 'GitHub',\n    'fab.github.tooltip': 'GitHub-Repository',\n    'fab.bulkImport.label': 'Massenimport',\n    'fab.bulkImport.tooltip': 'Mehrere Repositorys gleichzeitig registrieren',\n    'fab.quay.label': 'Quay',\n    'fab.quay.tooltip': 'Quay-Containerregistrierung',\n    'fab.menu.tooltip': 'Menü',\n  },\n});\n\nexport default globalFloatingActionButtonTranslationDe;\n"],"names":[],"mappings":";;;AAuBA,MAAM,0CAA0C,yBAA0B,CAAA;AAAA,EACxE,GAAK,EAAA,wCAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,kBAAoB,EAAA,WAAA;AAAA,IACpB,oBAAsB,EAAA,kBAAA;AAAA,IACtB,gBAAkB,EAAA,WAAA;AAAA,IAClB,kBAAoB,EAAA,eAAA;AAAA,IACpB,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,mBAAA;AAAA,IACpB,kBAAoB,EAAA,QAAA;AAAA,IACpB,oBAAsB,EAAA,mBAAA;AAAA,IACtB,sBAAwB,EAAA,cAAA;AAAA,IACxB,wBAA0B,EAAA,+CAAA;AAAA,IAC1B,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,6BAAA;AAAA,IACpB,kBAAoB,EAAA;AAAA;AAExB,CAAC;;;;"}

package/dist/translations/fr.esm.js

@@ -5,17 +5,17 @@ const globalFloatingActionButtonTranslationFr = createTranslationMessages({
   ref: globalFloatingActionButtonTranslationRef,
   messages: {
     "fab.create.label": "Cr\xE9er",
-    "fab.create.tooltip": "Cr\xE9er l'entit\xE9",
+    "fab.create.tooltip": "Cr\xE9er une entit\xE9",
     "fab.docs.label": "Docs",
     "fab.docs.tooltip": "Documentation",
     "fab.apis.label": "APIs",
-    "fab.apis.tooltip": "Documentation API",
+    "fab.apis.tooltip": "Documentation de l'API",
     "fab.github.label": "GitHub",
     "fab.github.tooltip": "R\xE9f\xE9rentiel GitHub",
-    "fab.bulkImport.label": "Importation en masse",
-    "fab.bulkImport.tooltip": "Enregistrer plusieurs r\xE9f\xE9rentiel en masse",
+    "fab.bulkImport.label": "Importation en vrac",
+    "fab.bulkImport.tooltip": "Enregistrez plusieurs r\xE9f\xE9rentiels en masse",
     "fab.quay.label": "Quay",
-    "fab.quay.tooltip": "Quay Container Registry",
+    "fab.quay.tooltip": "Registre des conteneurs de Quay",
     "fab.menu.tooltip": "Menu"
   }
 });

package/dist/translations/fr.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"fr.esm.js","sources":["../../src/translations/fr.ts"],"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 { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from './ref';\n\n/**\n * fr translation for plugin.global-floating-action-button.\n * @public\n */\nconst globalFloatingActionButtonTranslationFr = createTranslationMessages({\n  ref: globalFloatingActionButtonTranslationRef,\n  messages: {\n    'fab.create.label': 'Créer',\n    'fab.create.tooltip': \"Créer l'entité\",\n    'fab.docs.label': 'Docs',\n    'fab.docs.tooltip': 'Documentation',\n    'fab.apis.label': 'APIs',\n    'fab.apis.tooltip': 'Documentation API',\n    'fab.github.label': 'GitHub',\n    'fab.github.tooltip': 'Référentiel GitHub',\n    'fab.bulkImport.label': 'Importation en masse',\n    'fab.bulkImport.tooltip': 'Enregistrer plusieurs référentiel en masse',\n    'fab.quay.label': 'Quay',\n    'fab.quay.tooltip': 'Quay Container Registry',\n    'fab.menu.tooltip': 'Menu',\n  },\n});\n\nexport default globalFloatingActionButtonTranslationFr;\n"],"names":[],"mappings":";;;AAuBA,MAAM,0CAA0C,yBAA0B,CAAA;AAAA,EACxE,GAAK,EAAA,wCAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,kBAAoB,EAAA,UAAA;AAAA,IACpB,oBAAsB,EAAA,sBAAA;AAAA,IACtB,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,eAAA;AAAA,IACpB,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,mBAAA;AAAA,IACpB,kBAAoB,EAAA,QAAA;AAAA,IACpB,oBAAsB,EAAA,0BAAA;AAAA,IACtB,sBAAwB,EAAA,sBAAA;AAAA,IACxB,wBAA0B,EAAA,kDAAA;AAAA,IAC1B,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,yBAAA;AAAA,IACpB,kBAAoB,EAAA;AAAA;AAExB,CAAC;;;;"}
+{"version":3,"file":"fr.esm.js","sources":["../../src/translations/fr.ts"],"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 { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from './ref';\n\n/**\n * fr translation for plugin.global-floating-action-button.\n * @public\n */\nconst globalFloatingActionButtonTranslationFr = createTranslationMessages({\n  ref: globalFloatingActionButtonTranslationRef,\n  messages: {\n    'fab.create.label': 'Créer',\n    'fab.create.tooltip': 'Créer une entité',\n    'fab.docs.label': 'Docs',\n    'fab.docs.tooltip': 'Documentation',\n    'fab.apis.label': 'APIs',\n    'fab.apis.tooltip': \"Documentation de l'API\",\n    'fab.github.label': 'GitHub',\n    'fab.github.tooltip': 'Référentiel GitHub',\n    'fab.bulkImport.label': 'Importation en vrac',\n    'fab.bulkImport.tooltip': 'Enregistrez plusieurs référentiels en masse',\n    'fab.quay.label': 'Quay',\n    'fab.quay.tooltip': 'Registre des conteneurs de Quay',\n    'fab.menu.tooltip': 'Menu',\n  },\n});\n\nexport default globalFloatingActionButtonTranslationFr;\n"],"names":[],"mappings":";;;AAuBA,MAAM,0CAA0C,yBAA0B,CAAA;AAAA,EACxE,GAAK,EAAA,wCAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,kBAAoB,EAAA,UAAA;AAAA,IACpB,oBAAsB,EAAA,wBAAA;AAAA,IACtB,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,eAAA;AAAA,IACpB,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,wBAAA;AAAA,IACpB,kBAAoB,EAAA,QAAA;AAAA,IACpB,oBAAsB,EAAA,0BAAA;AAAA,IACtB,sBAAwB,EAAA,qBAAA;AAAA,IACxB,wBAA0B,EAAA,mDAAA;AAAA,IAC1B,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,iCAAA;AAAA,IACpB,kBAAoB,EAAA;AAAA;AAExB,CAAC;;;;"}

package/dist/translations/it.esm.js

@@ -11,11 +11,11 @@ const globalFloatingActionButtonTranslationIt = createTranslationMessages({
     "fab.apis.label": "API",
     "fab.apis.tooltip": "Documentazione API",
     "fab.github.label": "GitHub",
-    "fab.github.tooltip": "Repository GitHub",
+    "fab.github.tooltip": "Repository di GitHub",
     "fab.bulkImport.label": "Importazione in blocco",
     "fab.bulkImport.tooltip": "Registra pi\xF9 repository in blocco",
     "fab.quay.label": "Quay",
-    "fab.quay.tooltip": "Registro dei container di Quay",
+    "fab.quay.tooltip": "Registro container Quay",
     "fab.menu.tooltip": "Menu"
   }
 });

package/dist/translations/it.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"it.esm.js","sources":["../../src/translations/it.ts"],"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 { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from './ref';\n\n/**\n * Italian translation for plugin.global-floating-action-button.\n * @public\n */\nconst globalFloatingActionButtonTranslationIt = createTranslationMessages({\n  ref: globalFloatingActionButtonTranslationRef,\n  messages: {\n    'fab.create.label': 'Crea',\n    'fab.create.tooltip': 'Crea entità',\n    'fab.docs.label': 'Documenti',\n    'fab.docs.tooltip': 'Documentazione',\n    'fab.apis.label': 'API',\n    'fab.apis.tooltip': 'Documentazione API',\n    'fab.github.label': 'GitHub',\n    'fab.github.tooltip': 'Repository GitHub',\n    'fab.bulkImport.label': 'Importazione in blocco',\n    'fab.bulkImport.tooltip': 'Registra più repository in blocco',\n    'fab.quay.label': 'Quay',\n    'fab.quay.tooltip': 'Registro dei container di Quay',\n    'fab.menu.tooltip': 'Menu',\n  },\n});\n\nexport default globalFloatingActionButtonTranslationIt;\n"],"names":[],"mappings":";;;AAuBA,MAAM,0CAA0C,yBAA0B,CAAA;AAAA,EACxE,GAAK,EAAA,wCAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,kBAAoB,EAAA,MAAA;AAAA,IACpB,oBAAsB,EAAA,gBAAA;AAAA,IACtB,gBAAkB,EAAA,WAAA;AAAA,IAClB,kBAAoB,EAAA,gBAAA;AAAA,IACpB,gBAAkB,EAAA,KAAA;AAAA,IAClB,kBAAoB,EAAA,oBAAA;AAAA,IACpB,kBAAoB,EAAA,QAAA;AAAA,IACpB,oBAAsB,EAAA,mBAAA;AAAA,IACtB,sBAAwB,EAAA,wBAAA;AAAA,IACxB,wBAA0B,EAAA,sCAAA;AAAA,IAC1B,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,gCAAA;AAAA,IACpB,kBAAoB,EAAA;AAAA;AAExB,CAAC;;;;"}
+{"version":3,"file":"it.esm.js","sources":["../../src/translations/it.ts"],"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 { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { globalFloatingActionButtonTranslationRef } from './ref';\n\n/**\n * Italian translation for plugin.global-floating-action-button.\n * @public\n */\nconst globalFloatingActionButtonTranslationIt = createTranslationMessages({\n  ref: globalFloatingActionButtonTranslationRef,\n  messages: {\n    'fab.create.label': 'Crea',\n    'fab.create.tooltip': 'Crea entità',\n    'fab.docs.label': 'Documenti',\n    'fab.docs.tooltip': 'Documentazione',\n    'fab.apis.label': 'API',\n    'fab.apis.tooltip': 'Documentazione API',\n    'fab.github.label': 'GitHub',\n    'fab.github.tooltip': 'Repository di GitHub',\n    'fab.bulkImport.label': 'Importazione in blocco',\n    'fab.bulkImport.tooltip': 'Registra più repository in blocco',\n    'fab.quay.label': 'Quay',\n    'fab.quay.tooltip': 'Registro container Quay',\n    'fab.menu.tooltip': 'Menu',\n  },\n});\n\nexport default globalFloatingActionButtonTranslationIt;\n"],"names":[],"mappings":";;;AAuBA,MAAM,0CAA0C,yBAA0B,CAAA;AAAA,EACxE,GAAK,EAAA,wCAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,kBAAoB,EAAA,MAAA;AAAA,IACpB,oBAAsB,EAAA,gBAAA;AAAA,IACtB,gBAAkB,EAAA,WAAA;AAAA,IAClB,kBAAoB,EAAA,gBAAA;AAAA,IACpB,gBAAkB,EAAA,KAAA;AAAA,IAClB,kBAAoB,EAAA,oBAAA;AAAA,IACpB,kBAAoB,EAAA,QAAA;AAAA,IACpB,oBAAsB,EAAA,sBAAA;AAAA,IACtB,sBAAwB,EAAA,wBAAA;AAAA,IACxB,wBAA0B,EAAA,sCAAA;AAAA,IAC1B,gBAAkB,EAAA,MAAA;AAAA,IAClB,kBAAoB,EAAA,yBAAA;AAAA,IACpB,kBAAoB,EAAA;AAAA;AAExB,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-global-floating-action-button",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -37,9 +37,7 @@
     "@backstage/theme": "^0.7.2",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@mui/styles": "5.18.0",
     "@scalprum/react-core": "0.11.1",
-    "classnames": "^2.5.1",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {