@red-hat-developer-hub/backstage-plugin-global-floating-action-button 1.1.6 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/components/CustomFab.esm.js +50 -46
- package/dist/components/CustomFab.esm.js.map +1 -1
- package/dist/components/DynamicGlobalFloatingActionButton.esm.js +2 -2
- package/dist/components/DynamicGlobalFloatingActionButton.esm.js.map +1 -1
- package/dist/components/FABWithSubmenu.esm.js +48 -42
- package/dist/components/FABWithSubmenu.esm.js.map +1 -1
- package/dist/components/FabIcon.esm.js +7 -6
- package/dist/components/FabIcon.esm.js.map +1 -1
- package/dist/components/FloatingButton.esm.js +25 -21
- package/dist/components/FloatingButton.esm.js.map +1 -1
- package/dist/components/GlobalFloatingActionButton.esm.js +5 -5
- package/dist/components/GlobalFloatingActionButton.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @red-hat-developer-hub/backstage-plugin-global-floating-action-button
|
|
2
2
|
|
|
3
|
+
## 1.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 7eb9524: - Add correct right margin when quickstart drawer is open.
|
|
8
|
+
- Fix bug where page inset was hiding floating action buttons.
|
|
9
|
+
|
|
10
|
+
## 1.2.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- 1b21b0c: Bump to backstage version 1.39.1
|
|
15
|
+
|
|
3
16
|
## 1.1.6
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useNavigate } from 'react-router-dom';
|
|
3
3
|
import { makeStyles } from '@mui/styles';
|
|
4
4
|
import Fab from '@mui/material/Fab';
|
|
@@ -21,24 +21,28 @@ const FABLabel = ({
|
|
|
21
21
|
}) => {
|
|
22
22
|
const styles = useStyles();
|
|
23
23
|
const marginStyle = getSlotOptions(slot).margin;
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
24
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25
|
+
showExternalIcon && /* @__PURE__ */ jsx(
|
|
26
|
+
OpenInNewIcon,
|
|
27
|
+
{
|
|
28
|
+
className: styles.openInNew,
|
|
29
|
+
sx: { ...marginStyle, order: order.externalIcon }
|
|
30
|
+
}
|
|
31
|
+
),
|
|
32
|
+
label && /* @__PURE__ */ jsx(
|
|
33
|
+
Typography,
|
|
34
|
+
{
|
|
35
|
+
sx: {
|
|
36
|
+
...marginStyle,
|
|
37
|
+
color: "#151515",
|
|
38
|
+
order: 2,
|
|
39
|
+
textTransform: "none"
|
|
40
|
+
},
|
|
41
|
+
children: label
|
|
38
42
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
),
|
|
44
|
+
icon && /* @__PURE__ */ jsx(Typography, { sx: { mb: -1, order: order.icon }, children: /* @__PURE__ */ jsx(FabIcon, { icon }) })
|
|
45
|
+
] });
|
|
42
46
|
};
|
|
43
47
|
const CustomFab = ({
|
|
44
48
|
actionButton,
|
|
@@ -65,40 +69,40 @@ const CustomFab = ({
|
|
|
65
69
|
return undefined;
|
|
66
70
|
};
|
|
67
71
|
const displayOnRight = actionButton.slot === Slot.PAGE_END || !actionButton.slot;
|
|
68
|
-
return /* @__PURE__ */
|
|
72
|
+
return /* @__PURE__ */ jsx(
|
|
69
73
|
Tooltip,
|
|
70
74
|
{
|
|
71
75
|
title: actionButton.toolTip,
|
|
72
|
-
placement: getSlotOptions(actionButton.slot).tooltipDirection
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
Fab,
|
|
76
|
-
{
|
|
77
|
-
...newWindow ? { target: "_blank", rel: "noopener" } : {},
|
|
78
|
-
className,
|
|
79
|
-
style: {
|
|
80
|
-
color: actionButton?.iconColor || "#1f1f1f",
|
|
81
|
-
backgroundColor: actionButton.color ? "" : "white"
|
|
82
|
-
},
|
|
83
|
-
variant: actionButton.showLabel || isExternal || !actionButton.icon ? "extended" : "circular",
|
|
84
|
-
size: size || actionButton.size || "medium",
|
|
85
|
-
color: getColor(),
|
|
86
|
-
"aria-label": actionButton.label,
|
|
87
|
-
"data-testid": (actionButton.label || "").replace(" ", "-").toLocaleLowerCase("en-US"),
|
|
88
|
-
onClick: actionButton.onClick || navigateTo,
|
|
89
|
-
...isExternal ? { href: actionButton.to } : {}
|
|
90
|
-
},
|
|
91
|
-
/* @__PURE__ */ React.createElement(
|
|
92
|
-
FABLabel,
|
|
76
|
+
placement: getSlotOptions(actionButton.slot).tooltipDirection,
|
|
77
|
+
children: /* @__PURE__ */ jsx(
|
|
78
|
+
Fab,
|
|
93
79
|
{
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
80
|
+
...newWindow ? { target: "_blank", rel: "noopener" } : {},
|
|
81
|
+
className,
|
|
82
|
+
style: {
|
|
83
|
+
color: actionButton?.iconColor || "#1f1f1f",
|
|
84
|
+
backgroundColor: actionButton.color ? "" : "white"
|
|
85
|
+
},
|
|
86
|
+
variant: actionButton.showLabel || isExternal || !actionButton.icon ? "extended" : "circular",
|
|
87
|
+
size: size || actionButton.size || "medium",
|
|
88
|
+
color: getColor(),
|
|
89
|
+
"aria-label": actionButton.label,
|
|
90
|
+
"data-testid": (actionButton.label || "").replace(" ", "-").toLocaleLowerCase("en-US"),
|
|
91
|
+
onClick: actionButton.onClick || navigateTo,
|
|
92
|
+
...isExternal ? { href: actionButton.to } : {},
|
|
93
|
+
children: /* @__PURE__ */ jsx(
|
|
94
|
+
FABLabel,
|
|
95
|
+
{
|
|
96
|
+
showExternalIcon: isExternal,
|
|
97
|
+
icon: actionButton.icon,
|
|
98
|
+
label: actionButton.showLabel || !actionButton.icon ? labelText : "",
|
|
99
|
+
order: displayOnRight ? { externalIcon: isExternal ? 1 : -1, icon: 3 } : { externalIcon: isExternal ? 3 : -1, icon: 1 },
|
|
100
|
+
slot: actionButton.slot || Slot.PAGE_END
|
|
101
|
+
}
|
|
102
|
+
)
|
|
99
103
|
}
|
|
100
104
|
)
|
|
101
|
-
|
|
105
|
+
}
|
|
102
106
|
);
|
|
103
107
|
};
|
|
104
108
|
|
|
@@ -1 +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
|
|
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';\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}: {\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 return null;\n }\n\n const labelText =\n (actionButton.label || '').length > 20\n ? `${actionButton.label.slice(0, actionButton.label.length)}...`\n : actionButton.label;\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={actionButton.toolTip}\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={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 || !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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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useFabMountPoints } from '../hooks/useFabMountPoints.esm.js';
|
|
3
3
|
import { GlobalFloatingActionButton } from './GlobalFloatingActionButton.esm.js';
|
|
4
4
|
|
|
@@ -10,7 +10,7 @@ const DynamicGlobalFloatingActionButton = () => {
|
|
|
10
10
|
if (floatingButtons?.length === 0) {
|
|
11
11
|
return null;
|
|
12
12
|
}
|
|
13
|
-
return /* @__PURE__ */
|
|
13
|
+
return /* @__PURE__ */ jsx(GlobalFloatingActionButton, { floatingButtons });
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
export { DynamicGlobalFloatingActionButton };
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 { 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":[],"mappings":";;;;AAyBO,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,uBAAA,GAAA,CAAC,8BAA2B,eAAkC,EAAA,CAAA;AACvE;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useState, useEffect } from 'react';
|
|
2
3
|
import classnames from 'classnames';
|
|
3
4
|
import { useLocation } from 'react-router-dom';
|
|
4
5
|
import { makeStyles } from '@mui/styles';
|
|
@@ -33,12 +34,12 @@ const FABWithSubmenu = ({
|
|
|
33
34
|
fabs,
|
|
34
35
|
slot
|
|
35
36
|
}) => {
|
|
36
|
-
const containerRef =
|
|
37
|
+
const containerRef = useRef(null);
|
|
37
38
|
const styles = useStyles();
|
|
38
39
|
const fab = useStyles();
|
|
39
40
|
const { pathname } = useLocation();
|
|
40
|
-
const [isMenuOpen, setIsMenuOpen] =
|
|
41
|
-
|
|
41
|
+
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
42
|
+
useEffect(() => {
|
|
42
43
|
return () => {
|
|
43
44
|
setIsMenuOpen(false);
|
|
44
45
|
};
|
|
@@ -52,7 +53,7 @@ const FABWithSubmenu = ({
|
|
|
52
53
|
setIsMenuOpen(true);
|
|
53
54
|
}
|
|
54
55
|
};
|
|
55
|
-
return /* @__PURE__ */
|
|
56
|
+
return /* @__PURE__ */ jsxs(
|
|
56
57
|
Box,
|
|
57
58
|
{
|
|
58
59
|
className: classnames(fab.fabContainer, className),
|
|
@@ -60,43 +61,48 @@ const FABWithSubmenu = ({
|
|
|
60
61
|
flexDirection: "column-reverse"
|
|
61
62
|
},
|
|
62
63
|
id: "floating-button-with-submenu",
|
|
63
|
-
"data-testid": "floating-button-with-submenu"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
{
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
64
|
+
"data-testid": "floating-button-with-submenu",
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsx(Tooltip, { title: "Menu", placement: getSlotOptions(slot).tooltipDirection, children: /* @__PURE__ */ jsxs(Typography, { children: [
|
|
67
|
+
/* @__PURE__ */ jsx(Box, { ref: containerRef, sx: { overflow: "hidden" } }),
|
|
68
|
+
/* @__PURE__ */ jsx(
|
|
69
|
+
Fab,
|
|
70
|
+
{
|
|
71
|
+
size: "medium",
|
|
72
|
+
color: "info",
|
|
73
|
+
onClick: handleClick,
|
|
74
|
+
"aria-label": "Menu",
|
|
75
|
+
variant: "circular",
|
|
76
|
+
sx: { zIndex: 1e3 },
|
|
77
|
+
children: isMenuOpen ? /* @__PURE__ */ jsx(CloseIcon, { className: styles.menuButtonStyle }) : /* @__PURE__ */ jsx(MenuIcon, { className: styles.menuButtonStyle })
|
|
78
|
+
}
|
|
79
|
+
)
|
|
80
|
+
] }) }),
|
|
81
|
+
fabs?.map((fb) => {
|
|
82
|
+
return /* @__PURE__ */ jsx(
|
|
83
|
+
Slide,
|
|
84
|
+
{
|
|
85
|
+
direction: "up",
|
|
86
|
+
container: containerRef?.current,
|
|
87
|
+
in: isMenuOpen,
|
|
88
|
+
mountOnEnter: true,
|
|
89
|
+
unmountOnExit: true,
|
|
90
|
+
timeout: 500,
|
|
91
|
+
children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
|
|
92
|
+
CustomFab,
|
|
93
|
+
{
|
|
94
|
+
actionButton: fb,
|
|
95
|
+
size: "medium",
|
|
96
|
+
className: styles.button
|
|
97
|
+
},
|
|
98
|
+
fb.label
|
|
99
|
+
) })
|
|
100
|
+
},
|
|
101
|
+
fb.label
|
|
102
|
+
);
|
|
103
|
+
})
|
|
104
|
+
]
|
|
105
|
+
}
|
|
100
106
|
);
|
|
101
107
|
};
|
|
102
108
|
|
|
@@ -1 +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
|
|
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';\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\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 title=\"Menu\" placement={getSlotOptions(slot).tooltipDirection}>\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 size=\"medium\"\n key={fb.label}\n className={styles.button}\n />\n </Box>\n </Slide>\n );\n })}\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { isValidElement } from 'react';
|
|
2
3
|
import { useApp } from '@backstage/core-plugin-api';
|
|
3
4
|
import MuiIcon from '@mui/material/Icon';
|
|
4
5
|
|
|
@@ -7,22 +8,22 @@ const FabIcon = ({ icon }) => {
|
|
|
7
8
|
if (!icon) {
|
|
8
9
|
return null;
|
|
9
10
|
}
|
|
10
|
-
if (
|
|
11
|
+
if (isValidElement(icon)) {
|
|
11
12
|
return icon;
|
|
12
13
|
}
|
|
13
14
|
const strIcon = icon;
|
|
14
15
|
const SystemIcon = app.getSystemIcon(strIcon);
|
|
15
16
|
if (SystemIcon) {
|
|
16
|
-
return /* @__PURE__ */
|
|
17
|
+
return /* @__PURE__ */ jsx(SystemIcon, {});
|
|
17
18
|
}
|
|
18
19
|
if (strIcon.startsWith("<svg")) {
|
|
19
20
|
const svgDataUri = `data:image/svg+xml;base64,${btoa(strIcon)}`;
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
+
return /* @__PURE__ */ jsx(MuiIcon, { children: /* @__PURE__ */ jsx("img", { src: svgDataUri, alt: "" }) });
|
|
21
22
|
}
|
|
22
23
|
if (strIcon.startsWith("https://") || strIcon.startsWith("http://") || strIcon.startsWith("/")) {
|
|
23
|
-
return /* @__PURE__ */
|
|
24
|
+
return /* @__PURE__ */ jsx(MuiIcon, { baseClassName: "material-icons-outlined", children: /* @__PURE__ */ jsx("img", { src: strIcon, alt: "" }) });
|
|
24
25
|
}
|
|
25
|
-
return /* @__PURE__ */
|
|
26
|
+
return /* @__PURE__ */ jsx(MuiIcon, { baseClassName: "material-icons-outlined", children: strIcon });
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
export { FabIcon };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FabIcon.esm.js","sources":["../../src/components/FabIcon.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 */\nimport
|
|
1
|
+
{"version":3,"file":"FabIcon.esm.js","sources":["../../src/components/FabIcon.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 */\nimport type { ReactElement } from 'react';\n\nimport { isValidElement } from 'react';\nimport { useApp } from '@backstage/core-plugin-api';\n\nimport MuiIcon from '@mui/material/Icon';\n\nexport const FabIcon = ({ icon }: { icon: string | ReactElement }) => {\n const app = useApp();\n\n if (!icon) {\n return null;\n }\n\n if (isValidElement(icon)) {\n return icon;\n }\n\n const strIcon = icon as string;\n\n const SystemIcon = app.getSystemIcon(strIcon);\n\n if (SystemIcon) {\n return <SystemIcon />;\n }\n\n if (strIcon.startsWith('<svg')) {\n const svgDataUri = `data:image/svg+xml;base64,${btoa(strIcon)}`;\n return (\n <MuiIcon>\n <img src={svgDataUri} alt=\"\" />\n </MuiIcon>\n );\n }\n\n if (\n strIcon.startsWith('https://') ||\n strIcon.startsWith('http://') ||\n strIcon.startsWith('/')\n ) {\n return (\n <MuiIcon baseClassName=\"material-icons-outlined\">\n <img src={strIcon} alt=\"\" />\n </MuiIcon>\n );\n }\n\n return <MuiIcon baseClassName=\"material-icons-outlined\">{strIcon}</MuiIcon>;\n};\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,OAAU,GAAA,CAAC,EAAE,IAAA,EAA4C,KAAA;AACpE,EAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EAAI,IAAA,cAAA,CAAe,IAAI,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,OAAU,GAAA,IAAA;AAEhB,EAAM,MAAA,UAAA,GAAa,GAAI,CAAA,aAAA,CAAc,OAAO,CAAA;AAE5C,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,2BAAQ,UAAW,EAAA,EAAA,CAAA;AAAA;AAGrB,EAAI,IAAA,OAAA,CAAQ,UAAW,CAAA,MAAM,CAAG,EAAA;AAC9B,IAAA,MAAM,UAAa,GAAA,CAAA,0BAAA,EAA6B,IAAK,CAAA,OAAO,CAAC,CAAA,CAAA;AAC7D,IACE,uBAAA,GAAA,CAAC,WACC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,KAAK,UAAY,EAAA,GAAA,EAAI,IAAG,CAC/B,EAAA,CAAA;AAAA;AAIJ,EACE,IAAA,OAAA,CAAQ,UAAW,CAAA,UAAU,CAC7B,IAAA,OAAA,CAAQ,UAAW,CAAA,SAAS,CAC5B,IAAA,OAAA,CAAQ,UAAW,CAAA,GAAG,CACtB,EAAA;AACA,IACE,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,aAAA,EAAc,yBACrB,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAI,GAAK,EAAA,OAAA,EAAS,GAAI,EAAA,EAAA,EAAG,CAC5B,EAAA,CAAA;AAAA;AAIJ,EAAA,uBAAQ,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAc,EAAA,yBAAA,EAA2B,QAAQ,EAAA,OAAA,EAAA,CAAA;AACnE;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useState, useEffect, useMemo } from 'react';
|
|
2
3
|
import { createPortal } from 'react-dom';
|
|
3
4
|
import { useLocation } from 'react-router-dom';
|
|
4
5
|
import { makeStyles } from '@mui/styles';
|
|
@@ -8,12 +9,17 @@ import { filterAndSortButtons } from '../utils.esm.js';
|
|
|
8
9
|
|
|
9
10
|
const useStyles = makeStyles((theme) => ({
|
|
10
11
|
"page-end": {
|
|
11
|
-
bottom: theme?.spacing?.(2) ?? "16px"
|
|
12
|
-
right: theme?.spacing?.(2) ?? "16px"
|
|
13
|
-
alignItems: "end"
|
|
12
|
+
bottom: `calc(${theme?.spacing?.(2) ?? "16px"} + 1.5em)`,
|
|
13
|
+
right: `calc(${theme?.spacing?.(2) ?? "16px"} + 1.5em)`,
|
|
14
|
+
alignItems: "end",
|
|
15
|
+
// When quickstart drawer is open, adjust margin
|
|
16
|
+
".quickstart-drawer-open &": {
|
|
17
|
+
transition: "margin-right 0.3s ease",
|
|
18
|
+
marginRight: "var(--quickstart-drawer-width, 500px) "
|
|
19
|
+
}
|
|
14
20
|
},
|
|
15
21
|
"bottom-left": {
|
|
16
|
-
bottom: theme?.spacing?.(2) ?? "16px"
|
|
22
|
+
bottom: `calc(${theme?.spacing?.(2) ?? "16px"} + 1.5em)`,
|
|
17
23
|
paddingLeft: theme?.spacing?.(2) ?? "16px",
|
|
18
24
|
alignItems: "start"
|
|
19
25
|
}
|
|
@@ -22,13 +28,11 @@ const FloatingButton = ({
|
|
|
22
28
|
floatingButtons,
|
|
23
29
|
slot
|
|
24
30
|
}) => {
|
|
25
|
-
const timeoutRef =
|
|
31
|
+
const timeoutRef = useRef();
|
|
26
32
|
const { pathname } = useLocation();
|
|
27
33
|
const fabButton = useStyles();
|
|
28
|
-
const [targetElement, setTargetElement] =
|
|
29
|
-
|
|
30
|
-
);
|
|
31
|
-
React.useEffect(() => {
|
|
34
|
+
const [targetElement, setTargetElement] = useState(null);
|
|
35
|
+
useEffect(() => {
|
|
32
36
|
const checkTargetElement = () => {
|
|
33
37
|
const element = document.querySelector('[class^="BackstagePage-root"]') ?? document.querySelector("main");
|
|
34
38
|
if (element) {
|
|
@@ -42,7 +46,7 @@ const FloatingButton = ({
|
|
|
42
46
|
clearTimeout(timeoutRef.current);
|
|
43
47
|
};
|
|
44
48
|
}, [pathname, targetElement]);
|
|
45
|
-
const fabs =
|
|
49
|
+
const fabs = useMemo(
|
|
46
50
|
() => filterAndSortButtons(floatingButtons, pathname),
|
|
47
51
|
[floatingButtons, pathname]
|
|
48
52
|
);
|
|
@@ -51,9 +55,9 @@ const FloatingButton = ({
|
|
|
51
55
|
}
|
|
52
56
|
let fabDiv;
|
|
53
57
|
if (fabs.length > 1) {
|
|
54
|
-
fabDiv = /* @__PURE__ */
|
|
58
|
+
fabDiv = /* @__PURE__ */ jsx(FABWithSubmenu, { className: fabButton[slot], fabs, slot });
|
|
55
59
|
} else {
|
|
56
|
-
fabDiv = /* @__PURE__ */
|
|
60
|
+
fabDiv = /* @__PURE__ */ jsx(
|
|
57
61
|
"div",
|
|
58
62
|
{
|
|
59
63
|
style: {
|
|
@@ -63,14 +67,14 @@ const FloatingButton = ({
|
|
|
63
67
|
},
|
|
64
68
|
className: fabButton[slot],
|
|
65
69
|
id: "floating-button",
|
|
66
|
-
"data-testid": "floating-button"
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
"data-testid": "floating-button",
|
|
71
|
+
children: /* @__PURE__ */ jsx(
|
|
72
|
+
CustomFab,
|
|
73
|
+
{
|
|
74
|
+
actionButton: { color: "info", iconColor: "white", ...fabs[0] }
|
|
75
|
+
}
|
|
76
|
+
)
|
|
77
|
+
}
|
|
74
78
|
);
|
|
75
79
|
}
|
|
76
80
|
return targetElement ? createPortal(fabDiv, targetElement) : createPortal(fabDiv, document.body);
|
|
@@ -1 +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
|
|
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';\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 quickstart drawer is open, adjust margin\n '.quickstart-drawer-open &': {\n transition: 'margin-right 0.3s ease',\n marginRight: 'var(--quickstart-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\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 />\n </div>\n );\n }\n return targetElement\n ? createPortal(fabDiv, targetElement)\n : createPortal(fabDiv, document.body);\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { evaluateFloatingButtonsWithPositions } from '../utils.esm.js';
|
|
3
3
|
import { FloatingButton } from './FloatingButton.esm.js';
|
|
4
4
|
|
|
@@ -6,14 +6,14 @@ const GlobalFloatingActionButton = ({
|
|
|
6
6
|
floatingButtons
|
|
7
7
|
}) => {
|
|
8
8
|
const floatingButtonMap = evaluateFloatingButtonsWithPositions(floatingButtons);
|
|
9
|
-
return /* @__PURE__ */
|
|
9
|
+
return /* @__PURE__ */ jsx(Fragment, { children: floatingButtonMap.map((fb) => /* @__PURE__ */ jsx(
|
|
10
10
|
FloatingButton,
|
|
11
11
|
{
|
|
12
|
-
key: fb.slot,
|
|
13
12
|
slot: fb.slot,
|
|
14
13
|
floatingButtons: fb.actions
|
|
15
|
-
}
|
|
16
|
-
|
|
14
|
+
},
|
|
15
|
+
fb.slot
|
|
16
|
+
)) });
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
export { GlobalFloatingActionButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalFloatingActionButton.esm.js","sources":["../../src/components/GlobalFloatingActionButton.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 */\nimport
|
|
1
|
+
{"version":3,"file":"GlobalFloatingActionButton.esm.js","sources":["../../src/components/GlobalFloatingActionButton.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 */\nimport { FloatingActionButton } from '../types';\nimport { evaluateFloatingButtonsWithPositions } from '../utils';\nimport { FloatingButton } from './FloatingButton';\n\nexport const GlobalFloatingActionButton = ({\n floatingButtons,\n}: {\n floatingButtons: FloatingActionButton[];\n}) => {\n const floatingButtonMap =\n evaluateFloatingButtonsWithPositions(floatingButtons);\n\n return (\n <>\n {floatingButtonMap.map(fb => (\n <FloatingButton\n key={fb.slot}\n slot={fb.slot}\n floatingButtons={fb.actions}\n />\n ))}\n </>\n );\n};\n"],"names":[],"mappings":";;;;AAmBO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AACF,CAEM,KAAA;AACJ,EAAM,MAAA,iBAAA,GACJ,qCAAqC,eAAe,CAAA;AAEtD,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACG,QAAkB,EAAA,iBAAA,CAAA,GAAA,CAAI,CACrB,EAAA,qBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MAEC,MAAM,EAAG,CAAA,IAAA;AAAA,MACT,iBAAiB,EAAG,CAAA;AAAA,KAAA;AAAA,IAFf,EAAG,CAAA;AAAA,GAIX,CACH,EAAA,CAAA;AAEJ;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -74,7 +74,7 @@ declare const dynamicGlobalFloatingActionButtonPlugin: _backstage_core_plugin_ap
|
|
|
74
74
|
*/
|
|
75
75
|
declare const GlobalFloatingActionButton: ({ floatingButtons, }: {
|
|
76
76
|
floatingButtons: FloatingActionButton[];
|
|
77
|
-
}) =>
|
|
77
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
78
78
|
/**
|
|
79
79
|
* Dynamic Global Floating Action Button
|
|
80
80
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@red-hat-developer-hub/backstage-plugin-global-floating-action-button",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"main": "dist/index.esm.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
"ui-test": "start-server-and-test start localhost:3000 'playwright test'"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@backstage/core-components": "^0.
|
|
37
|
-
"@backstage/core-plugin-api": "^1.10.
|
|
38
|
-
"@backstage/theme": "^0.6.
|
|
36
|
+
"@backstage/core-components": "^0.17.2",
|
|
37
|
+
"@backstage/core-plugin-api": "^1.10.7",
|
|
38
|
+
"@backstage/theme": "^0.6.6",
|
|
39
39
|
"@mui/icons-material": "^5.15.17",
|
|
40
40
|
"@mui/material": "^5.15.17",
|
|
41
41
|
"@mui/styles": "5.17.1",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"react-router-dom": "^6.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@backstage/cli": "^0.
|
|
53
|
-
"@backstage/dev-utils": "^1.1.
|
|
52
|
+
"@backstage/cli": "^0.32.1",
|
|
53
|
+
"@backstage/dev-utils": "^1.1.10",
|
|
54
54
|
"@openshift/dynamic-plugin-sdk": "5.0.1",
|
|
55
55
|
"@testing-library/jest-dom": "^6.0.0",
|
|
56
56
|
"@testing-library/react": "^14.0.0",
|
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
"author": "Red Hat",
|
|
80
80
|
"typesVersions": {
|
|
81
81
|
"*": {
|
|
82
|
-
"
|
|
83
|
-
"
|
|
82
|
+
"package.json": [
|
|
83
|
+
"package.json"
|
|
84
84
|
]
|
|
85
85
|
}
|
|
86
86
|
},
|