FIX: Select range in worksheet when the name is selected if possible

webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx

@@ -30,24 +30,22 @@ interface NamedRangesProps {
     newScope: number | null,
     newFormula: string,
   ) => void;
-  newDefinedName: (
+  newDefinedName: (name: string, scope: number | null, formula: string) => void;
-    name: string,
-    scope: number | null,
-    formula: string,
-  ) => void;
   deleteDefinedName: (name: string, scope: number | null) => void;
-  selectedArea: () => string;
+  getSelectedArea: () => string;
+  onNameSelected: (name: string) => void;
 }
 
 function NamedRanges({
   title,
   onClose,
-  definedNameList = [],
+  definedNameList,
-  worksheets = [],
+  worksheets,
   updateDefinedName,
   newDefinedName,
   deleteDefinedName,
-  selectedArea,
+  getSelectedArea,
+  onNameSelected,
 }: NamedRangesProps) {
   const [editingDefinedName, setEditingDefinedName] =
     useState<DefinedName | null>(null);
@@ -87,7 +85,7 @@ function NamedRanges({
         return { formulaError: `${e}` };
       }
     } else {
-      if (!editingDefinedName || !updateDefinedName) return {};
+      if (!editingDefinedName) return {};
 
       const scope_index = worksheets.findIndex((s) => s.name === scope);
       const newScope = scope_index >= 0 ? scope_index : null;
@@ -121,8 +119,8 @@ function NamedRanges({
           ? worksheets[editingDefinedName.scope]?.name || "[unknown]"
           : "[Global]";
       formula = editingDefinedName.formula;
-    } else if (isCreatingNew && selectedArea) {
+    } else if (isCreatingNew && getSelectedArea) {
-      formula = selectedArea();
+      formula = getSelectedArea();
     }
 
     const headerTitle = isCreatingNew
@@ -147,7 +145,7 @@ function NamedRanges({
             </IconButtonWrapper>
           </Tooltip>
           <EditHeaderTitle>{headerTitle}</EditHeaderTitle>
-          {onClose && (
+
           <Tooltip
             title={t("right_drawer.close")}
             slotProps={{
@@ -176,7 +174,6 @@ function NamedRanges({
               <X />
             </IconButtonWrapper>
           </Tooltip>
-          )}
         </EditHeader>
         <Content>
           <EditNamedRange
@@ -194,11 +191,10 @@ function NamedRanges({
     );
   }
 
-  const currentSelectedArea = selectedArea ? selectedArea() : null;
+  const currentSelectedArea = getSelectedArea();
 
   return (
     <Container>
-      {onClose && (
       <Header>
         <HeaderTitle>{title}</HeaderTitle>
         <Tooltip
@@ -230,7 +226,6 @@ function NamedRanges({
           </IconButtonWrapper>
         </Tooltip>
       </Header>
-      )}
       <Content>
         {definedNameList.length === 0 ? (
           <EmptyStateMessage>
@@ -257,11 +252,11 @@ function NamedRanges({
                   key={`${definedName.name}-${definedName.scope}`}
                   tabIndex={0}
                   $isSelected={isSelected}
-                  onClick={() => handleListItemClick(definedName)}
+                  onClick={() => onNameSelected(definedName.formula)}
                   onKeyDown={(e) => {
                     if (e.key === "Enter" || e.key === " ") {
                       e.preventDefault();
-                      handleListItemClick(definedName);
+                      onNameSelected(definedName.formula);
                     }
                   }}
                 >
@@ -523,7 +518,7 @@ const IconButtonWrapper = styled("div")`
     height: 16px;
     stroke-width: 1.5;
   }
-  `;
+`;
 
 const EmptyStateMessage = styled("div")`
   display: flex;

webapp/IronCalc/src/components/RightDrawer/RightDrawer.tsx

@@ -28,7 +28,8 @@ interface RightDrawerProps {
   ) => void;
   newDefinedName: (name: string, scope: number | null, formula: string) => void;
   deleteDefinedName: (name: string, scope: number | null) => void;
-  selectedArea: () => string;
+  getSelectedArea: () => string;
+  onNameSelected: (name: string) => void;
 }
 
 const RightDrawer = ({
@@ -42,7 +43,8 @@ const RightDrawer = ({
   updateDefinedName,
   newDefinedName,
   deleteDefinedName,
-  selectedArea,
+  getSelectedArea,
+  onNameSelected,
 }: RightDrawerProps) => {
   const { t } = useTranslation();
   const [drawerWidth, setDrawerWidth] = useState(width);
@@ -108,7 +110,8 @@ const RightDrawer = ({
           updateDefinedName={updateDefinedName}
           newDefinedName={newDefinedName}
           deleteDefinedName={deleteDefinedName}
-          selectedArea={selectedArea}
+          getSelectedArea={getSelectedArea}
+          onNameSelected={onNameSelected}
         />
       </DrawerContent>
     </DrawerContainer>

webapp/IronCalc/src/components/Workbook/Workbook.tsx

@@ -1,8 +1,9 @@
-import type {
+import {
-  BorderOptions,
+  type BorderOptions,
-  ClipboardCell,
+  type ClipboardCell,
-  Model,
+  getTokens,
-  WorksheetProperties,
+  type Model,
+  type WorksheetProperties,
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
 import { t } from "i18next";
@@ -12,6 +13,7 @@ import {
   getNewClipboardId,
 } from "../clipboard";
 import { TOOLBAR_HEIGHT } from "../constants";
+import { tokenIsRangeType } from "../Editor/util";
 import FormulaBar from "../FormulaBar/FormulaBar";
 import RightDrawer, { DEFAULT_DRAWER_WIDTH } from "../RightDrawer/RightDrawer";
 import SheetTabBar from "../SheetTabBar";
@@ -768,11 +770,28 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.deleteDefinedName(name, scope);
           setRedrawId((id) => id + 1);
         }}
-        selectedArea={() => {
+        getSelectedArea={() => {
           const worksheetNames = worksheets.map((s) => s.name);
           const selectedView = model.getSelectedView();
           return getFullRangeToString(selectedView, worksheetNames);
         }}
+        onNameSelected={(formula) => {
+          const tokens = getTokens(formula);
+          const { token } = tokens[0];
+          if (tokenIsRangeType(token)) {
+            const sheetName = worksheets[model.getSelectedSheet()].name;
+            const {
+              sheet: refSheet,
+              left: { row: rowStart, column: columnStart },
+              right: { row: rowEnd, column: columnEnd },
+            } = token.Range;
+            if (refSheet !== null && refSheet === sheetName) {
+              model.setSelectedCell(rowStart, columnStart);
+              model.setSelectedRange(rowStart, columnStart, rowEnd, columnEnd);
+            }
+          }
+          setRedrawId((id) => id + 1);
+        }}
       />
     </Container>
   );