diff --git a/webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx b/webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx
index fb64916..8c761c6 100644
--- a/webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx
+++ b/webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx
@@ -55,6 +55,7 @@ function FormulaBar(properties: FormulaBarProps) {
onMenuOpenChange={handleMenuOpenChange}
openDrawer={properties.openDrawer}
canEdit={properties.canEdit}
+ model={model}
>
{cellAddress}
diff --git a/webapp/IronCalc/src/components/FormulaBar/FormulaBarMenu.tsx b/webapp/IronCalc/src/components/FormulaBar/FormulaBarMenu.tsx
index e93da52..2333c22 100644
--- a/webapp/IronCalc/src/components/FormulaBar/FormulaBarMenu.tsx
+++ b/webapp/IronCalc/src/components/FormulaBar/FormulaBarMenu.tsx
@@ -1,3 +1,4 @@
+import type { Model } from "@ironcalc/wasm";
import { Menu, MenuItem, styled } from "@mui/material";
import { Tag } from "lucide-react";
import { type ComponentProps, useCallback, useRef, useState } from "react";
@@ -13,6 +14,7 @@ type FormulaBarMenuProps = {
anchorOrigin?: ComponentProps["anchorOrigin"];
openDrawer: () => void;
canEdit: boolean;
+ model: Model;
};
const FormulaBarMenu = (properties: FormulaBarMenuProps) => {
@@ -30,6 +32,8 @@ const FormulaBarMenu = (properties: FormulaBarMenuProps) => {
properties.onMenuOpenChange?.(false);
}, [properties.onMenuOpenChange]);
+ const definedNameList = properties.model.getDefinedNameList();
+
return (
<>
@@ -49,12 +53,32 @@ const FormulaBarMenu = (properties: FormulaBarMenuProps) => {
horizontal: "left",
}}
>
-
-
- Range1
- $Sheet1!$A$1:$B$2
-
-
+ {definedNameList.length > 0 ? (
+ <>
+ {definedNameList.map((definedName) => {
+ const worksheets = properties.model.getWorksheetsProperties();
+ const scopeName =
+ definedName.scope != null
+ ? worksheets[definedName.scope]?.name || "[Unknown]"
+ : "[Global]";
+ return (
+ {
+ properties.onChange(definedName.name);
+ handleMenuClose();
+ }}
+ >
+
+ {definedName.name}
+ {definedName.formula}
+
+ );
+ })}
+
+ >
+ ) : null}
{
@@ -101,6 +125,7 @@ const MenuItemWrapper = styled(MenuItem, {
& svg {
width: 12px;
height: 12px;
+ flex-shrink: 0;
color: ${theme.palette.grey[600]};
}
`;
@@ -118,9 +143,11 @@ const MenuDivider = styled("div")`
`;
const MenuItemText = styled("div")`
+ width: 100%;
color: #000;
display: flex;
align-items: center;
+ text-overflow: ellipsis;
`;
const MenuItemExample = styled("div")`
diff --git a/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx b/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx
index 7136e32..97fca02 100644
--- a/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx
+++ b/webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx
@@ -399,6 +399,7 @@ const ListItem = styled("div")<{ $isSelected: boolean }>(({ $isSelected }) => ({
alignItems: "flex-start",
justifyContent: "space-between",
padding: "8px 12px",
+ cursor: "pointer",
minHeight: "40px",
boxSizing: "border-box",
borderBottom: `1px solid ${theme.palette.grey[200]}`,