@red-hat-developer-hub/backstage-plugin-global-floating-action-button 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @red-hat-developer-hub/backstage-plugin-global-floating-action-button
 
+## 0.0.4
+
+### Patch Changes
+
+- d783f6f: created dynamic fab to be integrated in the RHDH app
+
 ## 0.0.3
 
 ### Patch Changes

package/README.md

@@ -10,7 +10,59 @@ This plugin has been added to the example app in this workspace, meaning it can
 
 ### Installation
 
-#### Procedure
+#### Installing as a dynamic plugin?
+
+The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:
+
+- Follow https://github.com/redhat-developer/rhdh/blob/main/docs/dynamic-plugins/installing-plugins.md
+- Add content of `app-config.dynamic.yaml` into `app-config.local.yaml`.
+- To configure a plugin as a Floating Action Button (FAB), you need to specify the `global.floatingactionbutton/component` mount point in your plugin configuration, as shown below using the bulk-import plugin as an example:
+
+  ```yaml
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-bulk-import:
+        # start of fab config
+        mountPoints:
+          - mountPoint: global.floatingactionbutton/component
+            importName: BulkImportPage # It is necessary to specify an importName because mount point without an associated component is not allowed.
+            config:
+              slot: 'page-end'
+              icon: bulkImportIcon
+              label: 'Bulk import'
+              toolTip: 'Register multiple repositories in bulk'
+              to: /bulk-import/repositories
+        # end of fab config
+        appIcons:
+          - name: bulkImportIcon
+            importName: BulkImportIcon
+        dynamicRoutes:
+          - path: /bulk-import/repositories
+            importName: BulkImportPage
+            menuItem:
+              icon: bulkImportIcon
+              text: Bulk import
+  ```
+
+- To configure a Floating Action Button (FAB) that opens an external link, specify the `global.floatingactionbutton/component` mount point in the `backstage-plugin-global-floating-action-button` plugin, as shown below:
+
+  ```yaml
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-global-floating-action-button:
+        mountPoints:
+          - mountPoint: application/listener
+            importName: DynamicGlobalFloatingActionButton
+          - mountPoint: global.floatingactionbutton/component
+            importName: NullComponent # It is necessary to specify an importName because mount point without an associated component is not allowed.
+            config:
+              icon: github
+              label: 'Git'
+              toolTip: 'Github'
+              to: https://github.com/redhat-developer/rhdh-plugins
+  ```
+
+#### Static Installation
 
 1. Install the Global floating action button plugin using the following command:
 
@@ -29,7 +81,8 @@ This plugin has been added to the example app in this workspace, meaning it can
 
    export const Root = ({ children }: PropsWithChildren<{}>) => (
      <SidebarPage>
-       ... /* highlight-add-start */
+       {/* ... */}
+       {/* highlight-add-start */}
        <GlobalFloatingActionButton
          floatingButtons={[
            {
@@ -48,7 +101,8 @@ This plugin has been added to the example app in this workspace, meaning it can
            },
          ]}
        />
-       /* highlight-add-end */ ...
+       {/* highlight-add-end */}
+       {/* ... */}
      </SidebarPage>
    );
    ```

package/dist/components/DynamicGlobalFloatingActionButton.esm.js

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import { useFabMountPoints } from '../hooks/useFabMountPoints.esm.js';
+import { GlobalFloatingActionButton } from './GlobalFloatingActionButton.esm.js';
+
+const DynamicGlobalFloatingActionButton = () => {
+  const allFabMountPoints = useFabMountPoints();
+  const floatingButtons = (allFabMountPoints || []).map(
+    (fab) => fab?.config
+  );
+  if (floatingButtons?.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(GlobalFloatingActionButton, { floatingButtons });
+};
+
+export { DynamicGlobalFloatingActionButton };
+//# sourceMappingURL=DynamicGlobalFloatingActionButton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicGlobalFloatingActionButton.esm.js","sources":["../../src/components/DynamicGlobalFloatingActionButton.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 React from 'react';\n\nimport { useFabMountPoints } from '../hooks/useFabMountPoints';\nimport { GlobalFloatingActionButton } from './GlobalFloatingActionButton';\nimport { FloatingActionButton } from '../types';\n\n/**\n * Dynamic Global Floating Action Button\n *\n * @public\n */\nexport const DynamicGlobalFloatingActionButton = () => {\n  const allFabMountPoints = useFabMountPoints();\n\n  const floatingButtons = (allFabMountPoints || []).map(\n    fab => fab?.config,\n  ) as FloatingActionButton[];\n\n  if (floatingButtons?.length === 0) {\n    return null;\n  }\n\n  return <GlobalFloatingActionButton floatingButtons={floatingButtons} />;\n};\n"],"names":["React"],"mappings":";;;;AA2BO,MAAM,oCAAoC,MAAM;AACrD,EAAA,MAAM,oBAAoB,iBAAkB,EAAA;AAE5C,EAAM,MAAA,eAAA,GAAA,CAAmB,iBAAqB,IAAA,EAAI,EAAA,GAAA;AAAA,IAChD,SAAO,GAAK,EAAA;AAAA,GACd;AAEA,EAAI,IAAA,eAAA,EAAiB,WAAW,CAAG,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,8BAA2B,eAAkC,EAAA,CAAA;AACvE;;;;"}

package/dist/components/FAB.esm.js

@@ -49,7 +49,20 @@ const FAB = ({
   const isExternal = isExternalUri(actionButton.to);
   const newWindow = isExternal && !!/^https?:/.exec(actionButton.to);
   const navigateTo = () => actionButton.to && !isExternal ? navigate(actionButton.to) : "";
-  const labelText = actionButton.label.length > 20 ? `${actionButton.label.slice(0, actionButton.label.length)}...` : actionButton.label;
+  if (!actionButton.label) {
+    console.warn(
+      "Label is missing from your FAB component. A label is required for the aria-label attribute.",
+      actionButton
+    );
+  }
+  const labelText = (actionButton.label || "").length > 20 ? `${actionButton.label.slice(0, actionButton.label.length)}...` : actionButton.label;
+  if (!actionButton.icon) {
+    console.warn(
+      "Icon is missing from your FAB component. An icon is required to render a FAB button.",
+      actionButton
+    );
+    return null;
+  }
   const getColor = () => {
     if (actionButton.color) {
       return actionButton.color;
@@ -75,7 +88,7 @@ const FAB = ({
         size: size || actionButton.size || "medium",
         color: getColor(),
         "aria-label": actionButton.label,
-        "data-testid": actionButton.label.replace(" ", "-").toLocaleLowerCase("en-US"),
+        "data-testid": (actionButton.label || "").replace(" ", "-").toLocaleLowerCase("en-US"),
         onClick: actionButton.onClick || navigateTo,
         ...isExternal ? { href: actionButton.to } : {}
       },

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

@@ -1 +1 @@
-{"version":3,"file":"FAB.esm.js","sources":["../../src/components/FAB.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 * as React 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 { slotOptions } from '../utils';\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 | React.ReactElement;\n  order: { externalIcon?: number; icon?: number };\n}) => {\n  const styles = useStyles();\n  const marginStyle = slotOptions[slot].margin;\n  return (\n    <Typography sx={{ display: 'flex' }}>\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          }}\n        >\n          {label}\n        </Typography>\n      )}\n      <Typography sx={{ mb: -1, order: order.icon }}>\n        <FabIcon icon={icon} />\n      </Typography>\n    </Typography>\n  );\n};\n\nexport const FAB = ({\n  actionButton,\n  size,\n  className,\n}: {\n  actionButton: FloatingActionButton;\n  size?: 'small' | 'medium' | 'large';\n  className?: string;\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  const labelText =\n    actionButton.label.length > 20\n      ? `${actionButton.label.slice(0, actionButton.label.length)}...`\n      : actionButton.label;\n  const getColor = () => {\n    if (actionButton.color) {\n      return actionButton.color;\n    }\n    if (!className) {\n      return 'info';\n    }\n    return undefined;\n  };\n\n  const displayOnRight =\n    actionButton.slot === Slot.PAGE_END || !actionButton.slot;\n\n  return (\n    <Tooltip\n      title={actionButton.toolTip}\n      placement={\n        slotOptions[actionButton.slot || Slot.PAGE_END].tooltipDirection\n      }\n    >\n      <div className={className}>\n        <Fab\n          {...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}\n          style={{ color: '#1f1f1f' }}\n          variant={\n            actionButton.showLabel || isExternal ? 'extended' : 'circular'\n          }\n          size={size || actionButton.size || 'medium'}\n          color={getColor()}\n          aria-label={actionButton.label}\n          data-testid={actionButton.label\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 ? 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      </div>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FAB.esm.js","sources":["../../src/components/FAB.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 * as React 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 { slotOptions } from '../utils';\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 | React.ReactElement;\n  order: { externalIcon?: number; icon?: number };\n}) => {\n  const styles = useStyles();\n  const marginStyle = slotOptions[slot].margin;\n  return (\n    <Typography sx={{ display: 'flex' }}>\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          }}\n        >\n          {label}\n        </Typography>\n      )}\n      <Typography sx={{ mb: -1, order: order.icon }}>\n        <FabIcon icon={icon} />\n      </Typography>\n    </Typography>\n  );\n};\n\nexport const FAB = ({\n  actionButton,\n  size,\n  className,\n}: {\n  actionButton: FloatingActionButton;\n  size?: 'small' | 'medium' | 'large';\n  className?: string;\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  if (!actionButton.label) {\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  }\n\n  const labelText =\n    (actionButton.label || '').length > 20\n      ? `${actionButton.label.slice(0, actionButton.label.length)}...`\n      : actionButton.label;\n\n  if (!actionButton.icon) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'Icon is missing from your FAB component. An icon is required to render a FAB button.',\n      actionButton,\n    );\n    return null;\n  }\n\n  const getColor = () => {\n    if (actionButton.color) {\n      return actionButton.color;\n    }\n    if (!className) {\n      return 'info';\n    }\n    return undefined;\n  };\n\n  const displayOnRight =\n    actionButton.slot === Slot.PAGE_END || !actionButton.slot;\n\n  return (\n    <Tooltip\n      title={actionButton.toolTip}\n      placement={\n        slotOptions[actionButton.slot || Slot.PAGE_END].tooltipDirection\n      }\n    >\n      <div className={className}>\n        <Fab\n          {...(newWindow ? { target: '_blank', rel: 'noopener' } : {})}\n          style={{ color: '#1f1f1f' }}\n          variant={\n            actionButton.showLabel || isExternal ? 'extended' : 'circular'\n          }\n          size={size || actionButton.size || 'medium'}\n          color={getColor()}\n          aria-label={actionButton.label}\n          data-testid={(actionButton.label || '')\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 ? 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      </div>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FABWithSubmenu.esm.js

@@ -13,7 +13,7 @@ import { slotOptions } from '../utils.esm.js';
 const useStyles = makeStyles((theme) => ({
   button: {
     paddingTop: "10px",
-    color: theme.palette.grey[500]
+    color: theme && Object.keys(theme).length > 0 ? theme.palette.grey[500] : "#9e9e9e"
   },
   menuButtonStyle: {
     color: "#1f1f1f"

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 * as React from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { makeStyles } from '@mui/styles';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport { useTheme } from '@mui/material/styles';\nimport CloseIcon from '@mui/icons-material/Close';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport Collapse from '@mui/material/Collapse';\nimport { FAB } from './FAB';\nimport { slotOptions } from '../utils';\nimport { FloatingActionButton, Slot } from '../types';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    paddingTop: '10px',\n    color: theme.palette.grey[500],\n  },\n  menuButtonStyle: {\n    color: '#1f1f1f',\n  },\n}));\n\nexport const FABWithSubmenu = ({\n  fabs,\n  slot,\n}: {\n  fabs: FloatingActionButton[];\n  slot: Slot;\n}) => {\n  const styles = useStyles();\n  const theme = useTheme();\n  const { pathname } = useLocation();\n  const [isMenuOpen, setIsMenuOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    return () => {\n      setIsMenuOpen(false);\n    };\n  }, [pathname]);\n\n  const handleClick = () => {\n    setIsMenuOpen(prev => !prev);\n  };\n  return (\n    <>\n      <Tooltip title=\"Menu\" placement={slotOptions[slot].tooltipDirection}>\n        <Fab\n          size=\"medium\"\n          color=\"info\"\n          onClick={handleClick}\n          aria-label=\"Menu\"\n          variant=\"circular\"\n          data-testid=\"fab-with-submenu\"\n        >\n          {isMenuOpen ? (\n            <CloseIcon className={styles.menuButtonStyle} />\n          ) : (\n            <MenuIcon className={styles.menuButtonStyle} />\n          )}\n        </Fab>\n      </Tooltip>\n      <Collapse\n        style={{ textAlign: slotOptions[slot].textAlign }}\n        in={isMenuOpen}\n        mountOnEnter\n        unmountOnExit\n        orientation=\"vertical\"\n        easing={{\n          enter: theme.transitions.easing.easeOut,\n          exit: theme.transitions.easing.sharp,\n        }}\n      >\n        <>\n          {fabs?.map(fb => {\n            return (\n              <FAB\n                actionButton={fb}\n                size=\"medium\"\n                key={fb.label}\n                className={styles.button}\n              />\n            );\n          })}\n        </>\n      </Collapse>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA,MAAA;AAAA,IACZ,KAAO,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,GAAG;AAAA,GAC/B;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,KAAO,EAAA;AAAA;AAEX,CAAE,CAAA,CAAA;AAEK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,WAAY,EAAA;AACjC,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAExD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,OAAO,MAAM;AACX,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,cAAc,MAAM;AACxB,IAAc,aAAA,CAAA,CAAA,IAAA,KAAQ,CAAC,IAAI,CAAA;AAAA,GAC7B;AACA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,OAAQ,EAAA,EAAA,KAAA,EAAM,QAAO,SAAW,EAAA,WAAA,CAAY,IAAI,CAAA,CAAE,gBACjD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,KAAM,EAAA,MAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,YAAW,EAAA,MAAA;AAAA,MACX,OAAQ,EAAA,UAAA;AAAA,MACR,aAAY,EAAA;AAAA,KAAA;AAAA,IAEX,UAAA,mBACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,SAAW,EAAA,MAAA,CAAO,eAAiB,EAAA,CAAA,mBAE7C,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,MAAA,CAAO,eAAiB,EAAA;AAAA,GAGnD,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,SAAA,EAAW,WAAY,CAAA,IAAI,EAAE,SAAU,EAAA;AAAA,MAChD,EAAI,EAAA,UAAA;AAAA,MACJ,YAAY,EAAA,IAAA;AAAA,MACZ,aAAa,EAAA,IAAA;AAAA,MACb,WAAY,EAAA,UAAA;AAAA,MACZ,MAAQ,EAAA;AAAA,QACN,KAAA,EAAO,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA,OAAA;AAAA,QAChC,IAAA,EAAM,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA;AAAA;AACjC,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAM,EAAA,GAAA,CAAI,CAAM,EAAA,KAAA;AACf,MACE,uBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,YAAc,EAAA,EAAA;AAAA,UACd,IAAK,EAAA,QAAA;AAAA,UACL,KAAK,EAAG,CAAA,KAAA;AAAA,UACR,WAAW,MAAO,CAAA;AAAA;AAAA,OACpB;AAAA,KAEH,CACH;AAAA,GAEJ,CAAA;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 * as React from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { makeStyles } from '@mui/styles';\nimport Fab from '@mui/material/Fab';\nimport Tooltip from '@mui/material/Tooltip';\nimport { useTheme } from '@mui/material/styles';\nimport CloseIcon from '@mui/icons-material/Close';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport Collapse from '@mui/material/Collapse';\nimport { FAB } from './FAB';\nimport { slotOptions } from '../utils';\nimport { FloatingActionButton, Slot } from '../types';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    paddingTop: '10px',\n    color:\n      theme && Object.keys(theme).length > 0\n        ? theme.palette.grey[500]\n        : '#9e9e9e',\n  },\n  menuButtonStyle: {\n    color: '#1f1f1f',\n  },\n}));\n\nexport const FABWithSubmenu = ({\n  fabs,\n  slot,\n}: {\n  fabs: FloatingActionButton[];\n  slot: Slot;\n}) => {\n  const styles = useStyles();\n  const theme = useTheme();\n  const { pathname } = useLocation();\n  const [isMenuOpen, setIsMenuOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    return () => {\n      setIsMenuOpen(false);\n    };\n  }, [pathname]);\n\n  const handleClick = () => {\n    setIsMenuOpen(prev => !prev);\n  };\n  return (\n    <>\n      <Tooltip title=\"Menu\" placement={slotOptions[slot].tooltipDirection}>\n        <Fab\n          size=\"medium\"\n          color=\"info\"\n          onClick={handleClick}\n          aria-label=\"Menu\"\n          variant=\"circular\"\n          data-testid=\"fab-with-submenu\"\n        >\n          {isMenuOpen ? (\n            <CloseIcon className={styles.menuButtonStyle} />\n          ) : (\n            <MenuIcon className={styles.menuButtonStyle} />\n          )}\n        </Fab>\n      </Tooltip>\n      <Collapse\n        style={{ textAlign: slotOptions[slot].textAlign }}\n        in={isMenuOpen}\n        mountOnEnter\n        unmountOnExit\n        orientation=\"vertical\"\n        easing={{\n          enter: theme.transitions.easing.easeOut,\n          exit: theme.transitions.easing.sharp,\n        }}\n      >\n        <>\n          {fabs?.map(fb => {\n            return (\n              <FAB\n                actionButton={fb}\n                size=\"medium\"\n                key={fb.label}\n                className={styles.button}\n              />\n            );\n          })}\n        </>\n      </Collapse>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA,MAAA;AAAA,IACZ,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,IAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,WAAY,EAAA;AACjC,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAExD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,OAAO,MAAM;AACX,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,cAAc,MAAM;AACxB,IAAc,aAAA,CAAA,CAAA,IAAA,KAAQ,CAAC,IAAI,CAAA;AAAA,GAC7B;AACA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,OAAQ,EAAA,EAAA,KAAA,EAAM,QAAO,SAAW,EAAA,WAAA,CAAY,IAAI,CAAA,CAAE,gBACjD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,KAAM,EAAA,MAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,YAAW,EAAA,MAAA;AAAA,MACX,OAAQ,EAAA,UAAA;AAAA,MACR,aAAY,EAAA;AAAA,KAAA;AAAA,IAEX,UAAA,mBACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,SAAW,EAAA,MAAA,CAAO,eAAiB,EAAA,CAAA,mBAE7C,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,MAAA,CAAO,eAAiB,EAAA;AAAA,GAGnD,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,SAAA,EAAW,WAAY,CAAA,IAAI,EAAE,SAAU,EAAA;AAAA,MAChD,EAAI,EAAA,UAAA;AAAA,MACJ,YAAY,EAAA,IAAA;AAAA,MACZ,aAAa,EAAA,IAAA;AAAA,MACb,WAAY,EAAA,UAAA;AAAA,MACZ,MAAQ,EAAA;AAAA,QACN,KAAA,EAAO,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA,OAAA;AAAA,QAChC,IAAA,EAAM,KAAM,CAAA,WAAA,CAAY,MAAO,CAAA;AAAA;AACjC,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAM,EAAA,GAAA,CAAI,CAAM,EAAA,KAAA;AACf,MACE,uBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,YAAc,EAAA,EAAA;AAAA,UACd,IAAK,EAAA,QAAA;AAAA,UACL,KAAK,EAAG,CAAA,KAAA;AAAA,UACR,WAAW,MAAO,CAAA;AAAA;AAAA,OACpB;AAAA,KAEH,CACH;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/dist/components/FloatingButton.esm.js

@@ -14,13 +14,13 @@ const useStyles = makeStyles((theme) => ({
     gap: "10px"
   },
   "page-end": {
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
+    bottom: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : "16px",
+    right: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : "16px",
     alignItems: "end"
   },
   "bottom-left": {
-    bottom: theme.spacing(2),
-    paddingLeft: theme.spacing(2),
+    bottom: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : "16px",
+    paddingLeft: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : "16px",
     alignItems: "start"
   }
 }));

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 * as React from 'react';\nimport { useLocation } from 'react-router-dom';\nimport classnames from 'classnames';\n\nimport { makeStyles } from '@mui/styles';\nimport { FABWithSubmenu } from './FABWithSubmenu';\nimport { FAB } from './FAB';\nimport { FloatingActionButton, Slot } from '../types';\nimport { filterAndSortButtons } from '../utils';\n\nconst useStyles = makeStyles(theme => ({\n  fabContainer: {\n    zIndex: 200,\n    display: 'flex',\n    position: 'fixed',\n    gap: '10px',\n  },\n  'page-end': {\n    bottom: theme.spacing(2),\n    right: theme.spacing(2),\n    alignItems: 'end',\n  },\n  'bottom-left': {\n    bottom: theme.spacing(2),\n    paddingLeft: theme.spacing(2),\n    alignItems: 'start',\n  },\n}));\n\nexport const FloatingButton = ({\n  floatingButtons,\n  slot,\n}: {\n  floatingButtons: FloatingActionButton[];\n  slot: Slot;\n}) => {\n  const { pathname } = useLocation();\n  const [subMenuDirection, setSubMenuDirection] = React.useState<\n    'column' | 'column-reverse'\n  >('column');\n  const fabButton = useStyles();\n\n  React.useEffect(() => {\n    const floatingButtonElement = document.getElementById('floating-button');\n    const screenHeight = window.innerHeight;\n    if (floatingButtonElement) {\n      const { top } = floatingButtonElement?.getBoundingClientRect();\n      if (top < screenHeight / 2) {\n        setSubMenuDirection('column');\n      } else {\n        setSubMenuDirection('column-reverse');\n      }\n    }\n  }, [pathname]);\n\n  const fabs = React.useMemo(\n    () => filterAndSortButtons(floatingButtons, pathname),\n    [floatingButtons, pathname],\n  );\n\n  if (fabs?.length === 0) {\n    return null;\n  }\n  return (\n    <div\n      className={classnames(fabButton.fabContainer, fabButton[slot])}\n      style={{\n        flexDirection: subMenuDirection,\n      }}\n      id=\"floating-button\"\n      data-testId=\"floating-button\"\n    >\n      {fabs.length > 1 ? (\n        <FABWithSubmenu fabs={fabs} slot={slot} />\n      ) : (\n        <FAB actionButton={fabs[0]} />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA0BA,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,GAAK,EAAA;AAAA,GACP;AAAA,EACA,UAAY,EAAA;AAAA,IACV,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACvB,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACtB,UAAY,EAAA;AAAA,GACd;AAAA,EACA,aAAe,EAAA;AAAA,IACb,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACvB,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,eAAA;AAAA,EACA;AACF,CAGM,KAAA;AACJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,WAAY,EAAA;AACjC,EAAA,MAAM,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAA,KAAA,CAAM,SAEpD,QAAQ,CAAA;AACV,EAAA,MAAM,YAAY,SAAU,EAAA;AAE5B,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAM,MAAA,qBAAA,GAAwB,QAAS,CAAA,cAAA,CAAe,iBAAiB,CAAA;AACvE,IAAA,MAAM,eAAe,MAAO,CAAA,WAAA;AAC5B,IAAA,IAAI,qBAAuB,EAAA;AACzB,MAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,qBAAA,EAAuB,qBAAsB,EAAA;AAC7D,MAAI,IAAA,GAAA,GAAM,eAAe,CAAG,EAAA;AAC1B,QAAA,mBAAA,CAAoB,QAAQ,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,mBAAA,CAAoB,gBAAgB,CAAA;AAAA;AACtC;AACF,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,OAAO,KAAM,CAAA,OAAA;AAAA,IACjB,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;AAET,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAW,CAAA,SAAA,CAAU,YAAc,EAAA,SAAA,CAAU,IAAI,CAAC,CAAA;AAAA,MAC7D,KAAO,EAAA;AAAA,QACL,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,EAAG,EAAA,iBAAA;AAAA,MACH,aAAY,EAAA;AAAA,KAAA;AAAA,IAEX,IAAK,CAAA,MAAA,GAAS,CACb,mBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA,CAAA,mBAEvC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,YAAc,EAAA,IAAA,CAAK,CAAC,CAAG,EAAA;AAAA,GAEhC;AAEJ;;;;"}
+{"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 * as React from 'react';\nimport { useLocation } from 'react-router-dom';\nimport classnames from 'classnames';\n\nimport { makeStyles } from '@mui/styles';\nimport { FABWithSubmenu } from './FABWithSubmenu';\nimport { FAB } from './FAB';\nimport { FloatingActionButton, Slot } from '../types';\nimport { filterAndSortButtons } from '../utils';\n\nconst useStyles = makeStyles(theme => ({\n  fabContainer: {\n    zIndex: 200,\n    display: 'flex',\n    position: 'fixed',\n    gap: '10px',\n  },\n  'page-end': {\n    bottom: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : '16px',\n    right: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : '16px',\n    alignItems: 'end',\n  },\n  'bottom-left': {\n    bottom: theme && Object.keys(theme).length > 0 ? theme?.spacing(2) : '16px',\n    paddingLeft:\n      theme && Object.keys(theme).length > 0 ? 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 { pathname } = useLocation();\n  const [subMenuDirection, setSubMenuDirection] = React.useState<\n    'column' | 'column-reverse'\n  >('column');\n  const fabButton = useStyles();\n\n  React.useEffect(() => {\n    const floatingButtonElement = document.getElementById('floating-button');\n    const screenHeight = window.innerHeight;\n    if (floatingButtonElement) {\n      const { top } = floatingButtonElement?.getBoundingClientRect();\n      if (top < screenHeight / 2) {\n        setSubMenuDirection('column');\n      } else {\n        setSubMenuDirection('column-reverse');\n      }\n    }\n  }, [pathname]);\n\n  const fabs = React.useMemo(\n    () => filterAndSortButtons(floatingButtons, pathname),\n    [floatingButtons, pathname],\n  );\n\n  if (fabs?.length === 0) {\n    return null;\n  }\n  return (\n    <div\n      className={classnames(fabButton.fabContainer, fabButton[slot])}\n      style={{\n        flexDirection: subMenuDirection,\n      }}\n      id=\"floating-button\"\n      data-testId=\"floating-button\"\n    >\n      {fabs.length > 1 ? (\n        <FABWithSubmenu fabs={fabs} slot={slot} />\n      ) : (\n        <FAB actionButton={fabs[0]} />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/NullComponent.esm.js

@@ -0,0 +1,7 @@
+const NullComponent = () => {
+  console.info("NullComponent rendered.");
+  return null;
+};
+
+export { NullComponent };
+//# sourceMappingURL=NullComponent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NullComponent.esm.js","sources":["../../src/components/NullComponent.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\n/**\n * Null Component\n *\n * Mount point without a component is not considered. So adding this that doesn't return anything.\n * @public\n */\n\nexport const NullComponent = () => {\n  // eslint-disable-next-line no-console\n  console.info('NullComponent rendered.');\n  return null;\n};\n"],"names":[],"mappings":"AAuBO,MAAM,gBAAgB,MAAM;AAEjC,EAAA,OAAA,CAAQ,KAAK,yBAAyB,CAAA;AACtC,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist/hooks/useFabMountPoints.esm.js

@@ -0,0 +1,10 @@
+import { useScalprum } from '@scalprum/react-core';
+
+const useFabMountPoints = () => {
+  const scalprum = useScalprum();
+  const fabMountPoints = scalprum?.api?.dynamicRootConfig?.mountPoints?.["global.floatingactionbutton/component"];
+  return fabMountPoints;
+};
+
+export { useFabMountPoints };
+//# sourceMappingURL=useFabMountPoints.esm.js.map

package/dist/hooks/useFabMountPoints.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFabMountPoints.esm.js","sources":["../../src/hooks/useFabMountPoints.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 { useScalprum } from '@scalprum/react-core';\n\nimport { FABMountPoint } from '../types';\n\ninterface ScalprumState {\n  api?: {\n    dynamicRootConfig?: {\n      mountPoints?: {\n        'global.floatingactionbutton/component': FABMountPoint[];\n      };\n    };\n  };\n}\n\nexport const useFabMountPoints = (): FABMountPoint[] | undefined => {\n  const scalprum = useScalprum<ScalprumState>();\n  const fabMountPoints =\n    scalprum?.api?.dynamicRootConfig?.mountPoints?.[\n      'global.floatingactionbutton/component'\n    ];\n\n  return fabMountPoints;\n};\n"],"names":[],"mappings":";;AA8BO,MAAM,oBAAoB,MAAmC;AAClE,EAAA,MAAM,WAAW,WAA2B,EAAA;AAC5C,EAAA,MAAM,cACJ,GAAA,QAAA,EAAU,GAAK,EAAA,iBAAA,EAAmB,cAChC,uCACF,CAAA;AAEF,EAAO,OAAA,cAAA;AACT;;;;"}

package/dist/index.d.ts

@@ -45,6 +45,14 @@ type FloatingActionButtonWithPositions = Array<{
     slot: Slot;
     actions: FloatingActionButton[];
 }>;
+/**
+ * FAB Mount Point
+ *
+ * @public
+ */
+type FABMountPoint = {
+    config?: FloatingActionButton;
+};
 
 /**
  * Global Floating Action Button Plugin
@@ -52,6 +60,12 @@ type FloatingActionButtonWithPositions = Array<{
  * @public
  */
 declare const globalFloatingActionButtonPlugin: _backstage_core_plugin_api.BackstagePlugin<{}, {}, {}>;
+/**
+ * Dynamic Global Floating Action Button Plugin
+ *
+ * @public
+ */
+declare const dynamicGlobalFloatingActionButtonPlugin: _backstage_core_plugin_api.BackstagePlugin<{}, {}, {}>;
 /**
  * Global Floating Action Button
  *
@@ -60,5 +74,17 @@ declare const globalFloatingActionButtonPlugin: _backstage_core_plugin_api.Backs
 declare const GlobalFloatingActionButton: ({ floatingButtons, }: {
     floatingButtons: FloatingActionButton[];
 }) => react.JSX.Element;
+/**
+ * Dynamic Global Floating Action Button
+ *
+ * @public
+ */
+declare const DynamicGlobalFloatingActionButton: React.ComponentType;
+/**
+ * Null Component
+ *
+ * @public
+ */
+declare const NullComponent: React.ComponentType;
 
-export { type FloatingActionButton, type FloatingActionButtonWithPositions, GlobalFloatingActionButton, Slot, globalFloatingActionButtonPlugin };
+export { DynamicGlobalFloatingActionButton, type FABMountPoint, type FloatingActionButton, type FloatingActionButtonWithPositions, GlobalFloatingActionButton, NullComponent, Slot, dynamicGlobalFloatingActionButtonPlugin, globalFloatingActionButtonPlugin };

package/dist/index.esm.js

@@ -1,3 +1,3 @@
-export { GlobalFloatingActionButton, globalFloatingActionButtonPlugin } from './plugin.esm.js';
+export { DynamicGlobalFloatingActionButton, GlobalFloatingActionButton, NullComponent, dynamicGlobalFloatingActionButtonPlugin, globalFloatingActionButtonPlugin } from './plugin.esm.js';
 export { Slot } from './types.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/plugin.esm.js

@@ -3,6 +3,9 @@ import { createPlugin, createComponentExtension } from '@backstage/core-plugin-a
 const globalFloatingActionButtonPlugin = createPlugin({
   id: "global-floating-action-button"
 });
+const dynamicGlobalFloatingActionButtonPlugin = createPlugin({
+  id: "dynamic-global-floating-action-button"
+});
 const GlobalFloatingActionButton = globalFloatingActionButtonPlugin.provide(
   createComponentExtension({
     name: "GlobalFloatingActionButton",
@@ -13,6 +16,24 @@ const GlobalFloatingActionButton = globalFloatingActionButtonPlugin.provide(
     }
   })
 );
+const DynamicGlobalFloatingActionButton = dynamicGlobalFloatingActionButtonPlugin.provide(
+  createComponentExtension({
+    name: "DynamicGlobalFloatingActionButton",
+    component: {
+      lazy: () => import('./components/DynamicGlobalFloatingActionButton.esm.js').then(
+        (m) => m.DynamicGlobalFloatingActionButton
+      )
+    }
+  })
+);
+const NullComponent = dynamicGlobalFloatingActionButtonPlugin.provide(
+  createComponentExtension({
+    name: "NullComponent",
+    component: {
+      lazy: () => import('./components/NullComponent.esm.js').then((m) => m.NullComponent)
+    }
+  })
+);
 
-export { GlobalFloatingActionButton, globalFloatingActionButtonPlugin };
+export { DynamicGlobalFloatingActionButton, GlobalFloatingActionButton, NullComponent, dynamicGlobalFloatingActionButtonPlugin, globalFloatingActionButtonPlugin };
 //# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.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 {\n  createComponentExtension,\n  createPlugin,\n} from '@backstage/core-plugin-api';\n\n/**\n * Global Floating Action Button Plugin\n *\n * @public\n */\nexport const globalFloatingActionButtonPlugin = createPlugin({\n  id: 'global-floating-action-button',\n});\n\n/**\n * Global Floating Action Button\n *\n * @public\n */\nexport const GlobalFloatingActionButton =\n  globalFloatingActionButtonPlugin.provide(\n    createComponentExtension({\n      name: 'GlobalFloatingActionButton',\n      component: {\n        lazy: () =>\n          import('./components/GlobalFloatingActionButton').then(\n            m => m.GlobalFloatingActionButton,\n          ),\n      },\n    }),\n  );\n"],"names":[],"mappings":";;AA0BO,MAAM,mCAAmC,YAAa,CAAA;AAAA,EAC3D,EAAI,EAAA;AACN,CAAC;AAOM,MAAM,6BACX,gCAAiC,CAAA,OAAA;AAAA,EAC/B,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,4BAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,gDAAyC,CAAE,CAAA,IAAA;AAAA,QAChD,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.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 {\n  createComponentExtension,\n  createPlugin,\n} from '@backstage/core-plugin-api';\n\n/**\n * Global Floating Action Button Plugin\n *\n * @public\n */\nexport const globalFloatingActionButtonPlugin = createPlugin({\n  id: 'global-floating-action-button',\n});\n\n/**\n * Dynamic Global Floating Action Button Plugin\n *\n * @public\n */\nexport const dynamicGlobalFloatingActionButtonPlugin = createPlugin({\n  id: 'dynamic-global-floating-action-button',\n});\n\n/**\n * Global Floating Action Button\n *\n * @public\n */\nexport const GlobalFloatingActionButton =\n  globalFloatingActionButtonPlugin.provide(\n    createComponentExtension({\n      name: 'GlobalFloatingActionButton',\n      component: {\n        lazy: () =>\n          import('./components/GlobalFloatingActionButton').then(\n            m => m.GlobalFloatingActionButton,\n          ),\n      },\n    }),\n  );\n\n/**\n * Dynamic Global Floating Action Button\n *\n * @public\n */\nexport const DynamicGlobalFloatingActionButton: React.ComponentType =\n  dynamicGlobalFloatingActionButtonPlugin.provide(\n    createComponentExtension({\n      name: 'DynamicGlobalFloatingActionButton',\n      component: {\n        lazy: () =>\n          import('./components/DynamicGlobalFloatingActionButton').then(\n            m => m.DynamicGlobalFloatingActionButton,\n          ),\n      },\n    }),\n  );\n\n/**\n * Null Component\n *\n * @public\n */\nexport const NullComponent: React.ComponentType =\n  dynamicGlobalFloatingActionButtonPlugin.provide(\n    createComponentExtension({\n      name: 'NullComponent',\n      component: {\n        lazy: () =>\n          import('./components/NullComponent').then(m => m.NullComponent),\n      },\n    }),\n  );\n"],"names":[],"mappings":";;AA0BO,MAAM,mCAAmC,YAAa,CAAA;AAAA,EAC3D,EAAI,EAAA;AACN,CAAC;AAOM,MAAM,0CAA0C,YAAa,CAAA;AAAA,EAClE,EAAI,EAAA;AACN,CAAC;AAOM,MAAM,6BACX,gCAAiC,CAAA,OAAA;AAAA,EAC/B,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,4BAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,gDAAyC,CAAE,CAAA,IAAA;AAAA,QAChD,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;AAOK,MAAM,oCACX,uCAAwC,CAAA,OAAA;AAAA,EACtC,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,mCAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,uDAAgD,CAAE,CAAA,IAAA;AAAA,QACvD,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;AAOK,MAAM,gBACX,uCAAwC,CAAA,OAAA;AAAA,EACtC,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,eAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,mCAA4B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,aAAa;AAAA;AAClE,GACD;AACH;;;;"}

package/dist/types.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.esm.js","sources":["../src/types.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\n/**\n * Slot\n *\n * @public\n */\nexport enum Slot {\n  /**\n   * Positions the floating action button in the bottom-right corner of the page\n   */\n  PAGE_END = 'page-end',\n  /**\n   * Positions the floating action button at the bottom center of the page\n   */\n  BOTTOM_LEFT = 'bottom-left',\n}\n\n/**\n * Floating Action Button\n *\n * @public\n */\nexport type FloatingActionButton = {\n  slot?: Slot;\n  label: string;\n  showLabel?: boolean;\n  icon: string | React.ReactElement;\n  size?: 'small' | 'medium' | 'large';\n  color?:\n    | 'default'\n    | 'error'\n    | 'info'\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'warning';\n  onClick?: React.MouseEventHandler;\n  to?: string;\n  toolTip?: string;\n  priority?: number;\n  visibleOnPaths?: string[];\n  excludeOnPaths?: string[];\n};\n\n/**\n * Floating Action Button With Positions\n *\n * @public\n */\nexport type FloatingActionButtonWithPositions = Array<{\n  slot: Slot;\n  actions: FloatingActionButton[];\n}>;\n"],"names":["Slot"],"mappings":"AAqBY,IAAA,IAAA,qBAAAA,KAAL,KAAA;AAIL,EAAAA,MAAA,UAAW,CAAA,GAAA,UAAA;AAIX,EAAAA,MAAA,aAAc,CAAA,GAAA,aAAA;AARJ,EAAAA,OAAAA,KAAAA;AAAA,CAAA,EAAA,IAAA,IAAA,EAAA;;;;"}
+{"version":3,"file":"types.esm.js","sources":["../src/types.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\n/**\n * Slot\n *\n * @public\n */\nexport enum Slot {\n  /**\n   * Positions the floating action button in the bottom-right corner of the page\n   */\n  PAGE_END = 'page-end',\n  /**\n   * Positions the floating action button at the bottom center of the page\n   */\n  BOTTOM_LEFT = 'bottom-left',\n}\n\n/**\n * Floating Action Button\n *\n * @public\n */\nexport type FloatingActionButton = {\n  slot?: Slot;\n  label: string;\n  showLabel?: boolean;\n  icon: string | React.ReactElement;\n  size?: 'small' | 'medium' | 'large';\n  color?:\n    | 'default'\n    | 'error'\n    | 'info'\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'warning';\n  onClick?: React.MouseEventHandler;\n  to?: string;\n  toolTip?: string;\n  priority?: number;\n  visibleOnPaths?: string[];\n  excludeOnPaths?: string[];\n};\n\n/**\n * Floating Action Button With Positions\n *\n * @public\n */\nexport type FloatingActionButtonWithPositions = Array<{\n  slot: Slot;\n  actions: FloatingActionButton[];\n}>;\n\n/**\n * FAB Mount Point\n *\n * @public\n */\nexport type FABMountPoint = {\n  config?: FloatingActionButton;\n};\n"],"names":["Slot"],"mappings":"AAqBY,IAAA,IAAA,qBAAAA,KAAL,KAAA;AAIL,EAAAA,MAAA,UAAW,CAAA,GAAA,UAAA;AAIX,EAAAA,MAAA,aAAc,CAAA,GAAA,aAAA;AARJ,EAAAA,OAAAA,KAAAA;AAAA,CAAA,EAAA,IAAA,IAAA,EAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-global-floating-action-button",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -39,6 +39,7 @@
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@mui/styles": "5.16.13",
+    "@scalprum/react-core": "0.9.3",
     "classnames": "^2.5.1",
     "react-use": "^17.2.4"
   },
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@backstage/cli": "^0.28.0",
     "@backstage/dev-utils": "^1.1.2",
+    "@openshift/dynamic-plugin-sdk": "5.0.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"