BOB

base/src/model.rs

@@ -418,6 +418,7 @@ impl Model {
                 CalcResult::new_error(Error::NIMPL, cell, "Arrays not implemented".to_string())
             }
             VariableKind(defined_name) => {
+                println!("{:?}", defined_name);
                 let parsed_defined_name = self
                     .parsed_defined_names
                     .get(&(Some(cell.sheet), defined_name.to_lowercase())) // try getting local defined name
@@ -426,6 +427,7 @@ impl Model {
                             .get(&(None, defined_name.to_lowercase()))
                     }); // fallback to global
 
+                println!("Parsed: {:?}", defined_name);
                 if let Some(parsed_defined_name) = parsed_defined_name {
                     match parsed_defined_name {
                         ParsedDefinedName::CellReference(reference) => {
@@ -1986,6 +1988,95 @@ impl Model {
             .worksheet_mut(sheet)?
             .set_row_height(column, height)
     }
+
+    /// Adds a new defined name
+    pub fn new_defined_name(
+        &mut self,
+        name: &str,
+        scope: Option<u32>,
+        formula: &str,
+    ) -> Result<(), String> {
+        let name_upper = name.to_uppercase();
+        let defined_names = &self.workbook.defined_names;
+        // if the defined name already exist return error
+        for df in defined_names {
+            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
+                return Err("Defined name already exists".to_string());
+            }
+        }
+        self.workbook.defined_names.push(DefinedName {
+            name: name.to_string(),
+            formula: formula.to_string(),
+            sheet_id: scope,
+        });
+        self.reset_parsed_structures();
+        Ok(())
+    }
+
+    /// Delete defined name of name and scope
+    pub fn delete_defined_name(&mut self, name: &str, scope: Option<u32>) -> Result<(), String> {
+        let name_upper = name.to_uppercase();
+        let defined_names = &self.workbook.defined_names;
+        let mut index = None;
+        for (i, df) in defined_names.iter().enumerate() {
+            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
+                index = Some(i);
+            }
+        }
+        if let Some(i) = index {
+            self.workbook.defined_names.remove(i);
+            self.reset_parsed_structures();
+            Ok(())
+        } else {
+            Err("Defined name not found".to_string())
+        }
+    }
+
+    /// returns the formula for a defined name
+    pub fn get_defined_name_formula(
+        &self,
+        name: &str,
+        scope: Option<u32>,
+    ) -> Result<String, String> {
+        let name_upper = name.to_uppercase();
+        let defined_names = &self.workbook.defined_names;
+        for df in defined_names {
+            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
+                return Ok(df.formula.clone());
+            }
+        }
+        Err("Defined name not found".to_string())
+    }
+
+    /// update defined name
+    pub fn update_defined_name(
+        &mut self,
+        name: &str,
+        scope: Option<u32>,
+        new_name: &str,
+        new_scope: Option<u32>,
+        new_formula: &str,
+    ) -> Result<(), String> {
+        let name_upper = name.to_uppercase();
+        let defined_names = &self.workbook.defined_names;
+        let mut index = None;
+        for (i, df) in defined_names.iter().enumerate() {
+            if df.name.to_uppercase() == name_upper && df.sheet_id == scope {
+                index = Some(i);
+            }
+        }
+        if let Some(i) = index {
+            if let Some(df) = self.workbook.defined_names.get_mut(i) {
+                df.name = new_name.to_string();
+                df.sheet_id = new_scope;
+                df.formula = new_formula.to_string();
+                self.reset_parsed_structures();
+            }
+            Ok(())
+        } else {
+            Err("Defined name not found".to_string())
+        }
+    }
 }
 
 #[cfg(test)]

base/src/test/user_model/mod.rs

@@ -3,6 +3,7 @@ mod test_autofill_columns;
 mod test_autofill_rows;
 mod test_border;
 mod test_clear_cells;
+mod test_defined_names;
 mod test_diff_queue;
 mod test_evaluation;
 mod test_general;

base/src/test/user_model/test_defined_names.rs

@@ -0,0 +1,40 @@
+#![allow(clippy::unwrap_used)]
+
+use crate::UserModel;
+
+#[test]
+fn create_defined_name() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    model.set_user_input(0, 1, 1, "42").unwrap();
+    model.new_defined_name("myName", None, "$A$1").unwrap();
+    model.set_user_input(0, 5, 7, "=myName").unwrap();
+    assert_eq!(
+        model.get_formatted_cell_value(0, 5, 7),
+        Ok("42".to_string())
+    );
+
+    // rename it
+    model
+        .update_defined_name("myName", None, "myName", None, "$A$1*2")
+        .unwrap();
+    assert_eq!(
+        model.get_formatted_cell_value(0, 5, 7),
+        Ok("42".to_string())
+    );
+
+    // delete it
+    model.delete_defined_name("myName", None).unwrap();
+    assert_eq!(
+        model.get_formatted_cell_value(0, 5, 7),
+        Ok("#REF!".to_string())
+    );
+}
+
+#[test]
+fn rename_defined_name() {}
+
+#[test]
+fn delete_sheet() {}
+
+#[test]
+fn change_scope() {}

base/src/user_model/common.rs

@@ -13,8 +13,8 @@ use crate::{
     },
     model::Model,
     types::{
-        Alignment, BorderItem, CellType, Col, HorizontalAlignment, SheetProperties, Style,
+        Alignment, BorderItem, CellType, Col, DefinedName, HorizontalAlignment, SheetProperties,
-        VerticalAlignment,
+        Style, VerticalAlignment,
     },
     utils::is_valid_hex_color,
 };
@@ -1692,6 +1692,66 @@ impl UserModel {
         Ok(())
     }
 
+    /// Returns the list of defined names
+    pub fn get_defined_name_list(&self) -> Vec<DefinedName> {
+        self.model.workbook.defined_names.clone()
+    }
+
+    /// Delete an existing defined name
+    pub fn delete_defined_name(&mut self, name: &str, scope: Option<u32>) -> Result<(), String> {
+        let old_value = self.model.get_defined_name_formula(name, scope)?;
+        let diff_list = vec![Diff::DeleteDefinedName {
+            name: name.to_string(),
+            scope,
+            old_value,
+        }];
+        self.push_diff_list(diff_list);
+        self.model.delete_defined_name(name, scope)?;
+        self.evaluate_if_not_paused();
+        Ok(())
+    }
+
+    /// Create a new defined name
+    pub fn new_defined_name(
+        &mut self,
+        name: &str,
+        scope: Option<u32>,
+        formula: &str,
+    ) -> Result<(), String> {
+        self.model.new_defined_name(name, scope, formula)?;
+        let diff_list = vec![Diff::CreateDefinedName {
+            name: name.to_string(),
+            scope,
+            value: formula.to_string(),
+        }];
+        self.push_diff_list(diff_list);
+        self.evaluate_if_not_paused();
+        Ok(())
+    }
+
+    /// Updates a defined name
+    pub fn update_defined_name(
+        &mut self,
+        name: &str,
+        scope: Option<u32>,
+        new_name: &str,
+        new_scope: Option<u32>,
+        new_formula: &str,
+    ) -> Result<(), String> {
+        let old_formula = self.model.get_defined_name_formula(name, scope)?;
+        let diff_list = vec![Diff::UpdateDefinedName {
+            name: name.to_string(),
+            scope,
+            old_formula: old_formula.to_string(),
+            new_name: new_name.to_string(),
+            new_scope,
+            new_formula: new_formula.to_string(),
+        }];
+        self.push_diff_list(diff_list);
+        self.evaluate_if_not_paused();
+        Ok(())
+    }
+
     // **** Private methods ****** //
 
     fn push_diff_list(&mut self, diff_list: DiffList) {
@@ -1862,6 +1922,20 @@ impl UserModel {
                 } => {
                     self.model.set_show_grid_lines(*sheet, *old_value)?;
                 }
+                Diff::CreateDefinedName { name, scope, value } => todo!(),
+                Diff::DeleteDefinedName {
+                    name,
+                    scope,
+                    old_value,
+                } => todo!(),
+                Diff::UpdateDefinedName {
+                    name,
+                    scope,
+                    old_formula,
+                    new_name,
+                    new_scope,
+                    new_formula,
+                } => todo!(),
             }
         }
         if needs_evaluation {
@@ -1989,6 +2063,20 @@ impl UserModel {
                 } => {
                     self.model.set_show_grid_lines(*sheet, *new_value)?;
                 }
+                Diff::CreateDefinedName { name, scope, value } => todo!(),
+                Diff::DeleteDefinedName {
+                    name,
+                    scope,
+                    old_value,
+                } => todo!(),
+                Diff::UpdateDefinedName {
+                    name,
+                    scope,
+                    old_formula,
+                    new_name,
+                    new_scope,
+                    new_formula,
+                } => todo!(),
             }
         }
 

base/src/user_model/history.rs

@@ -108,7 +108,26 @@ pub(crate) enum Diff {
         sheet: u32,
         old_value: bool,
         new_value: bool,
-    }, // FIXME: we are missing SetViewDiffs
+    },
+    CreateDefinedName {
+        name: String,
+        scope: Option<u32>,
+        value: String,
+    },
+    DeleteDefinedName {
+        name: String,
+        scope: Option<u32>,
+        old_value: String,
+    },
+    UpdateDefinedName {
+        name: String,
+        scope: Option<u32>,
+        old_formula: String,
+        new_name: String,
+        new_scope: Option<u32>,
+        new_formula: String,
+    },
+    // FIXME: we are missing SetViewDiffs
 }
 
 pub(crate) type DiffList = Vec<Diff>;

bindings/wasm/fix_types.py

@@ -187,6 +187,20 @@ paste_from_clipboard_types = r"""
   pasteFromClipboard(source_sheet: number, source_range: [number, number, number, number], clipboard: ClipboardData, is_cut: boolean): void;
 """
 
+defined_name_list = r"""
+/**
+* @returns {any}
+*/
+  getDefinedNameList(): any;
+"""
+
+defined_name_list_types = r"""
+/**
+* @returns {DefinedName[]}
+*/
+  getDefinedNameList(): DefinedName[];
+"""
+
 def fix_types(text):
     text = text.replace(get_tokens_str, get_tokens_str_types)
     text = text.replace(update_style_str, update_style_str_types)
@@ -200,6 +214,7 @@ def fix_types(text):
     text = text.replace(paste_csv_string, paste_csv_string_types)
     text = text.replace(clipboard, clipboard_types)
     text = text.replace(paste_from_clipboard, paste_from_clipboard_types)
+    text = text.replace(defined_name_list, defined_name_list_types)
     with open("types.ts") as f:
         types_str = f.read()
         header_types = "{}\n\n{}".format(header, types_str)

bindings/wasm/src/lib.rs

@@ -1,3 +1,4 @@
+use serde::Serialize;
 use wasm_bindgen::{
     prelude::{wasm_bindgen, JsError},
     JsValue,
@@ -29,6 +30,13 @@ pub fn column_name_from_number(column: i32) -> Result<String, JsError> {
     }
 }
 
+#[derive(Serialize)]
+struct DefinedName {
+    name: String,
+    scope: Option<u32>,
+    formula: String,
+}
+
 #[wasm_bindgen]
 pub struct Model {
     model: BaseModel,
@@ -542,4 +550,52 @@ impl Model {
             .paste_csv_string(&range, csv)
             .map_err(|e| to_js_error(e.to_string()))
     }
+
+    #[wasm_bindgen(js_name = "getDefinedNameList")]
+    pub fn get_defined_name_list(&self) -> Result<JsValue, JsError> {
+        let data: Vec<DefinedName> =
+            self.model
+                .get_defined_name_list()
+                .iter()
+                .map(|s| DefinedName {
+                    name: s.name.to_string(),
+                    scope: s.sheet_id,
+                    formula: s.formula.to_string(),
+                }).collect();
+        // Ok(data)
+        serde_wasm_bindgen::to_value(&data).map_err(|e| to_js_error(e.to_string()))
+    }
+
+    #[wasm_bindgen(js_name = "newDefinedName")]
+    pub fn new_defined_name(
+        &mut self,
+        name: &str,
+        scope: Option<u32>,
+        formula: &str,
+    ) -> Result<(), JsError> {
+        self.model
+            .new_defined_name(name, scope, formula)
+            .map_err(|e| to_js_error(e.to_string()))
+    }
+
+    #[wasm_bindgen(js_name = "updateDefinedName")]
+    pub fn update_defined_name(
+        &mut self,
+        name: &str,
+        scope: Option<u32>,
+        new_name: &str,
+        new_scope: Option<u32>,
+        new_formula: &str,
+    ) -> Result<(), JsError> {
+        self.model
+            .update_defined_name(name, scope, new_name, new_scope, new_formula)
+            .map_err(|e| to_js_error(e.to_string()))
+    }
+
+    #[wasm_bindgen(js_name = "deleteDefinedName")]
+    pub fn delete_definedname(&mut self, name: &str, scope: Option<u32>) -> Result<(), JsError> {
+        self.model
+            .delete_defined_name(name, scope)
+            .map_err(|e| to_js_error(e.to_string()))
+    }
 }

bindings/wasm/types.ts

@@ -227,3 +227,9 @@ export interface Clipboard {
   data: ClipboardData;
   range: [number, number, number, number];
 }
+
+export interface DefinedName {
+  name: string;
+  scope?: number;
+  formula: string;
+}

webapp/src/AppComponents/DeleteWorkbookDialog.tsx

@@ -1,160 +0,0 @@
-import styled from "@emotion/styled";
-import { Trash2 } from "lucide-react";
-import { forwardRef, useEffect } from "react";
-import { theme } from "../theme";
-
-export const DeleteWorkbookDialog = forwardRef<
-  HTMLDivElement,
-  {
-    onClose: () => void;
-    onConfirm: () => void;
-    workbookName: string;
-  }
->((properties, ref) => {
-  useEffect(() => {
-    const root = document.getElementById("root");
-    if (root) {
-      root.style.filter = "blur(2px)";
-    }
-    return () => {
-      const root = document.getElementById("root");
-      if (root) {
-        root.style.filter = "none";
-      }
-    };
-  }, []);
-
-  return (
-    <DialogWrapper
-      ref={ref}
-      tabIndex={-1}
-      role="dialog"
-      aria-labelledby="delete-dialog-title"
-      aria-describedby="delete-dialog-description"
-    >
-      <IconWrapper>
-        <Trash2 />
-      </IconWrapper>
-      <ContentWrapper>
-        <Title>Are you sure?</Title>
-        <Body>
-          The workbook <strong>'{properties.workbookName}'</strong> will be
-          permanently deleted. This action cannot be undone.
-        </Body>
-        <ButtonGroup>
-          <DeleteButton
-            onClick={() => {
-              properties.onConfirm();
-              properties.onClose();
-            }}
-          >
-            Yes, delete workbook
-          </DeleteButton>
-          <CancelButton onClick={properties.onClose}>Cancel</CancelButton>
-        </ButtonGroup>
-      </ContentWrapper>
-    </DialogWrapper>
-  );
-});
-
-DeleteWorkbookDialog.displayName = "DeleteWorkbookDialog";
-
-const DialogWrapper = styled.div`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 12px;
-  border-radius: 8px;
-  box-shadow: 0px 1px 3px 0px ${theme.palette.common.black}1A;
-  width: 280px;
-  max-width: calc(100% - 40px);
-  z-index: 50;
-  font-family: "Inter", sans-serif;
-`;
-
-const IconWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 4px;
-  background-color: ${theme.palette.error.main}1A;
-  margin: 12px auto 0 auto;
-  color: ${theme.palette.error.main};
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-`;
-
-const ContentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  word-break: break-word;
-`;
-
-const Title = styled.h2`
-  margin: 0;
-  font-weight: 600;
-  font-size: inherit;
-  color: ${theme.palette.grey["900"]};
-`;
-
-const Body = styled.p`
-  margin: 0;
-  text-align: center;
-  color: ${theme.palette.grey["900"]};
-  font-size: 12px;
-`;
-
-const ButtonGroup = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-  width: 100%;
-`;
-
-const Button = styled.button`
-  cursor: pointer;
-  color: ${theme.palette.common.white};
-  background-color: ${theme.palette.primary.main};
-  padding: 0px 10px;
-  height: 36px;
-  border-radius: 4px;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  transition: background-color 150ms;
-  &:hover {
-    background-color: ${theme.palette.primary.dark};
-  }
-`;
-
-const DeleteButton = styled(Button)`
-  background-color: ${theme.palette.error.main};
-  color: ${theme.palette.common.white};
-  &:hover {
-    background-color: ${theme.palette.error.dark};
-  }
-`;
-
-const CancelButton = styled(Button)`
-  background-color: ${theme.palette.grey["200"]};
-  color: ${theme.palette.grey["700"]};
-  &:hover {
-    background-color: ${theme.palette.grey["300"]};
-  }
-`;

webapp/src/AppComponents/FileMenu.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
 import { Check, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
-import { DeleteWorkbookDialog } from "./DeleteWorkbookDialog";
 import { UploadFileDialog } from "./UploadFileDialog";
 import { getModelsMetadata, getSelectedUuid } from "./storage";
 
@@ -19,7 +18,6 @@ export function FileMenu(props: {
   const models = getModelsMetadata();
   const uuids = Object.keys(models);
   const selectedUuid = getSelectedUuid();
-  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const elements = [];
   for (const uuid of uuids) {
@@ -90,14 +88,16 @@ export function FileMenu(props: {
             Download (.xlsx)
           </MenuItemText>
         </MenuItemWrapper>
-        <MenuItemWrapper
+        <MenuItemWrapper>
-          onClick={() => {
-            setDeleteDialogOpen(true);
-            setMenuOpen(false);
-          }}
-        >
           <StyledTrash />
-          <MenuItemText>Delete workbook</MenuItemText>
+          <MenuItemText
+            onClick={() => {
+              props.onDelete();
+              setMenuOpen(false);
+            }}
+          >
+            Delete workbook
+          </MenuItemText>
         </MenuItemWrapper>
         <MenuDivider />
         {elements}
@@ -127,18 +127,6 @@ export function FileMenu(props: {
           />
         </>
       </Modal>
-      <Modal
-        open={isDeleteDialogOpen}
-        onClose={() => setDeleteDialogOpen(false)}
-        aria-labelledby="delete-dialog-title"
-        aria-describedby="delete-dialog-description"
-      >
-        <DeleteWorkbookDialog
-          onClose={() => setDeleteDialogOpen(false)}
-          onConfirm={props.onDelete}
-          workbookName={selectedUuid ? models[selectedUuid] : ""}
-        />
-      </Modal>
     </>
   );
 }

webapp/src/components/NameManagerDialog.tsx

@@ -0,0 +1,127 @@
+import type { Model } from "@ironcalc/wasm";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  styled,
+} from "@mui/material";
+import { t } from "i18next";
+import { BookOpen, X } from "lucide-react";
+import { useState } from "react";
+import NamedRange from "./NamedRange";
+import type { NamedRangeObject } from "./NamedRange";
+
+type NameManagerDialogProperties = {
+  onClose: () => void;
+  onSave: () => void;
+  open: boolean;
+  model: Model;
+};
+
+function NameManagerDialog(props: NameManagerDialogProperties) {
+
+  const handleClose = () => {
+    props.onClose();
+  };
+
+  // update child component values in model
+  const handleSave = () => {
+    props.onSave(); // => onNamedRangesUpdate from toolbar
+    props.onClose();
+  };
+
+  //! Why are fields editable only while clicking them?
+  // update child component values in UI
+  const handleChange = (id: string, field: string, value: string) => {
+    console.log("change:", id, field, value);
+
+    // previous array elements, plus updated value
+    // setNamedRangesLocal((prev) =>
+    //   prev.map((namedRange) =>
+    //     namedRange.id === id ? { ...namedRange, [field]: value } : namedRange,
+    //   ),
+    // );
+  };
+
+  const nameList = props.model.getDefinedNameList();
+
+  return (
+    <StyledDialog
+      open={props.open}
+      onClose={props.onClose}
+      maxWidth="md"
+      fullWidth
+      scroll="paper"
+    >
+      <StyledDialogTitle>
+        Named Ranges
+        <IconButton onClick={handleClose}>
+          <X size={16} />
+        </IconButton>
+      </StyledDialogTitle>
+      <DialogContent dividers>
+        {nameList.map((e) => (
+          <NamedRange
+            worksheets={props.model.getWorksheetsProperties()}
+            name={e.name}
+            scope={e.scope}
+            range={e.formula}
+            key={`${e.name}-${e.scope}`}
+            onChange={handleChange}
+            model={props.model}
+          />
+        ))}
+      </DialogContent>
+      <StyledDialogActions>
+        <Box display="flex" alignItems="center">
+          <BookOpen
+            color="grey"
+            style={{ width: 16, height: 16, marginLeft: 12, marginRight: 8 }}
+          />
+          <span style={{ fontSize: "12px", fontFamily: "Inter" }}>
+            {t("name_manager_dialog.help")}
+          </span>
+        </Box>
+        <Box display="flex" gap="10px">
+          <Button onClick={handleClose} variant="contained" color="info">
+            Cancel
+          </Button>
+          <Button onClick={handleSave} variant="contained">
+            Save changes
+          </Button>
+        </Box>
+      </StyledDialogActions>
+    </StyledDialog>
+  );
+}
+
+const StyledDialog = styled(Dialog)(() => ({
+  "& .MuiPaper-root": {
+    maxHeight: "60%",
+    minHeight: "40%",
+  },
+}));
+
+// font-weight: 600 is too bold compared to design, should be between 500 & 600
+const StyledDialogTitle = styled(DialogTitle)`
+font-size: 14px;
+font-weight: 600;
+display: flex;
+align-items: center;
+justify-content: space-between;
+`;
+
+const StyledDialogActions = styled(DialogActions)`
+height: 40px;
+display: flex;
+align-items: center;
+justify-content: space-between;
+font-size: 12px;
+color: #757575;
+`;
+
+export default NameManagerDialog;

webapp/src/components/NamedRange.tsx

@@ -0,0 +1,91 @@
+import type { Model, WorksheetProperties } from "@ironcalc/wasm";
+import { Box, IconButton, MenuItem, TextField, styled } from "@mui/material";
+import { Trash2 } from "lucide-react";
+
+export type NamedRangeObject = {
+  id: string;
+  name: string;
+  scope: string;
+  range: string;
+};
+
+type NamedRangeProperties = {
+  name: string;
+  scope: string;
+  range: string;
+  model: Model;
+  worksheets: WorksheetProperties[];
+  // update namedRange in model
+  onChange: (field: string, value: string) => void;
+};
+
+function NamedRange(props: NamedRangeProperties) {
+  // define onChange in parent for updating the model and values
+
+  const handleDelete = () => {
+    // update model
+    console.log("deleted named range");
+  };
+
+  return (
+    <StyledBox>
+      <TextField
+        variant="outlined"
+        size="small"
+        margin="normal"
+        fullWidth
+        value={props.name}
+        onChange={(event) =>
+          props.onChange("name", event.target.value)
+        }
+        onKeyDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={(event) => event.stopPropagation()}
+      />
+      <TextField
+        variant="outlined"
+        select
+        defaultValue="Workbook"
+        size="small"
+        margin="normal"
+        fullWidth
+        value={props.scope}
+        onChange={(event) =>
+          props.onChange("scope", event.target.value)
+        }
+      >
+        {props.worksheets.map((option) => (
+          <MenuItem key={option.sheet_id} value={option.name}>
+            {option.name}
+          </MenuItem>
+        ))}
+      </TextField>
+      <TextField
+        variant="outlined"
+        size="small"
+        margin="normal"
+        fullWidth
+        value={props.range}
+        onChange={(event) =>
+          props.onChange("range", event.target.value)
+        }
+        onKeyDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={(event) => event.stopPropagation()}
+      />
+      {/* remove round hover animation  */}
+      <IconButton onClick={handleDelete}>
+        <Trash2 size={16} absoluteStrokeWidth />
+      </IconButton>
+    </StyledBox>
+  );
+}
+
+const StyledBox = styled(Box)`
+display: flex;
+gap: 15px;
+`;
+
+export default NamedRange;

webapp/src/components/SheetTabBar/SheetRenameDialog.tsx

@@ -54,8 +54,6 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
             if (event.key === "Enter") {
               properties.onNameChanged(name);
               properties.onClose();
-            } else if (event.key === "Escape") {
-              properties.onClose();
             }
           }}
           onChange={(event) => {
@@ -63,8 +61,6 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
           }}
           spellCheck="false"
           onPaste={(event) => event.stopPropagation()}
-          onCopy={(event) => event.stopPropagation()}
-          onCut={(event) => event.stopPropagation()}
         />
       </StyledDialogContent>
       <DialogFooter>

webapp/src/components/SheetTabBar/SheetTab.tsx

@@ -1,5 +1,4 @@
 import { Button, Menu, MenuItem, styled } from "@mui/material";
-import type { MenuItemProps } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
 import { theme } from "../../theme";
@@ -15,7 +14,6 @@ interface SheetTabProps {
   onSelected: () => void;
   onColorChanged: (hex: string) => void;
   onRenamed: (name: string) => void;
-  canDelete: boolean;
   onDeleted: () => void;
   workbookState: WorkbookState;
 }
@@ -94,7 +92,6 @@ function SheetTab(props: SheetTabProps) {
           Change Color
         </StyledMenuItem>
         <StyledMenuItem
-          disabled={!props.canDelete}
           onClick={() => {
             props.onDeleted();
             handleClose();
@@ -140,19 +137,16 @@ const StyledMenu = styled(Menu)`
   }
 `;
 
-const StyledMenuItem = styled(MenuItem)<MenuItemProps>(() => ({
+const StyledMenuItem = styled(MenuItem)`
-  display: "flex",
+  display: flex;
-  justifyContent: "space-between",
+  justify-content: space-between;
-  fontSize: "12px",
+  font-size: 12px;
-  width: "calc(100% - 8px)",
+  width: calc(100% - 8px);
-  margin: "0px 4px",
+  margin: 0px 4px;
-  borderRadius: "4px",
+  border-radius: 4px;
-  padding: "8px",
+  padding: 8px;
-  height: "32px",
+  height: 32px;
-  "&:disabled": {
+`;
-    color: "#BDBDBD",
-  },
-}));
 
 const TabWrapper = styled("div")<{ $color: string; $selected: boolean }>`
   display: flex;

webapp/src/components/SheetTabBar/SheetTabBar.tsx

@@ -71,7 +71,6 @@ function SheetTabBar(props: SheetTabBarProps) {
                 props.onSheetDeleted();
               }}
               workbookState={workbookState}
-              canDelete={sheets.length > 1}
             />
           ))}
         </SheetInner>

webapp/src/components/WorksheetCanvas/constants.ts

@@ -5,10 +5,10 @@ export const headerGlobalSelectorColor = "#EAECF4";
 export const headerSelectedBackground = "#EEEEEE";
 export const headerFullSelectedBackground = "#D3D6E9";
 export const headerSelectedColor = "#333";
-export const headerBorderColor = "#E0E0E0";
+export const headerBorderColor = "#DEE0EF";
 
 export const gridColor = "#E0E0E0";
-export const gridSeparatorColor = "#E0E0E0";
+export const gridSeparatorColor = "#D3D6E9";
 export const defaultTextColor = "#2E414D";
 
 export const outlineColor = "#F2994A";

webapp/src/components/colorPicker.tsx

@@ -45,8 +45,8 @@ const ColorPicker = (properties: ColorPickerProps) => {
     "#3BB68A",
     "#8CB354",
     "#F8CD3C",
-    "#F2994A",
     "#EC5753",
+    "#A23C52",
     "#D03627",
     "#523E93",
     "#3358B7",

webapp/src/components/toolbar.tsx

@@ -1,6 +1,7 @@
 import type {
   BorderOptions,
   HorizontalAlignment,
+  Model,
   VerticalAlignment,
 } from "@ironcalc/wasm";
 import { styled } from "@mui/material/styles";
@@ -22,6 +23,7 @@ import {
   Percent,
   Redo2,
   Strikethrough,
+  Tags,
   Type,
   Underline,
   Undo2,
@@ -34,6 +36,7 @@ import {
   DecimalPlacesIncreaseIcon,
 } from "../icons";
 import { theme } from "../theme";
+import NameManagerDialog from "./NameManagerDialog";
 import BorderPicker from "./borderPicker";
 import ColorPicker from "./colorPicker";
 import { TOOLBAR_HEIGHT } from "./constants";
@@ -60,6 +63,7 @@ type ToolbarProperties = {
   onFillColorPicked: (hex: string) => void;
   onNumberFormatPicked: (numberFmt: string) => void;
   onBorderChanged: (border: BorderOptions) => void;
+  onNamedRangesUpdate: () => void;
   fillColor: string;
   fontColor: string;
   bold: boolean;
@@ -72,12 +76,14 @@ type ToolbarProperties = {
   numFmt: string;
   showGridLines: boolean;
   onToggleShowGridLines: (show: boolean) => void;
+  model: Model;
 };
 
 function Toolbar(properties: ToolbarProperties) {
   const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
   const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
   const [borderPickerOpen, setBorderPickerOpen] = useState(false);
+  const [nameManagerDialogOpen, setNameManagerDialogOpen] = useState(false);
 
   const fontColorButton = useRef(null);
   const fillColorButton = useRef(null);
@@ -340,6 +346,18 @@ function Toolbar(properties: ToolbarProperties) {
       >
         {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
       </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() => {
+          setNameManagerDialogOpen(true);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.name_manager")}
+      >
+        <Tags />
+      </StyledButton>
 
       <ColorPicker
         color={properties.fontColor}
@@ -375,6 +393,18 @@ function Toolbar(properties: ToolbarProperties) {
         anchorEl={borderButton}
         open={borderPickerOpen}
       />
+      <NameManagerDialog
+        open={nameManagerDialogOpen}
+        onClose={() => {
+          setNameManagerDialogOpen(false);
+        }}
+        onSave={() => {
+          console.log(
+            "update NamedRanges in model => properties.onNamedRangesUpdate",
+          );
+        }}
+        model={properties.model}
+      />
     </ToolbarContainer>
   );
 }

webapp/src/components/workbook.tsx

@@ -113,6 +113,10 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
     updateRangeStyle("num_fmt", numberFmt);
   };
 
+  const onNamedRangesUpdate = () => {
+    // update named ranges in model
+  }
+
   const onCopyStyles = () => {
     const {
       sheet,
@@ -559,6 +563,8 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.setShowGridLines(sheet, show);
           setRedrawId((id) => id + 1);
         }}
+        onNamedRangesUpdate={onNamedRangesUpdate}
+        model={model}
       />
       <FormulaBar
         cellAddress={cellAddress()}

webapp/src/locale/en_us.json

@@ -1,77 +1,81 @@
 {
-  "toolbar": {
+	"toolbar": {
-    "redo": "Redo",
+		"redo": "Redo",
-    "undo": "Undo",
+		"undo": "Undo",
-    "copy_styles": "Copy styles",
+		"copy_styles": "Copy styles",
-    "euro": "Format as Euro",
+		"euro": "Format as Euro",
-    "percentage": "Format as Percentage",
+		"percentage": "Format as Percentage",
-    "bold": "Bold",
+		"bold": "Bold",
-    "italic": "Italic",
+		"italic": "Italic",
-    "underline": "Underline",
+		"underline": "Underline",
-    "strike_through": "Strikethrough",
+		"strike_through": "Strikethrough",
-    "align_left": "Align left",
+		"align_left": "Align left",
-    "align_right": "Align right",
+		"align_right": "Align right",
-    "align_center": "Align center",
+		"align_center": "Align center",
-    "format_number": "Format number",
+		"format_number": "Format number",
-    "font_color": "Font color",
+		"font_color": "Font color",
-    "fill_color": "Fill color",
+		"fill_color": "Fill color",
-    "decimal_places_increase": "Increase decimal places",
+		"decimal_places_increase": "Increase decimal places",
-    "decimal_places_decrease": "Decrease decimal places",
+		"decimal_places_decrease": "Decrease decimal places",
-    "show_hide_grid_lines": "Show/hide grid lines",
+		"show_hide_grid_lines": "Show/hide grid lines",
-    "vertical_align_bottom": "Align bottom",
+		"name_manager": "Name manager",
-    "vertical_align_middle": " Align middle",
+		"vertical_align_bottom": "Align bottom",
-    "vertical_align_top": "Align top",
+		"vertical_align_middle": " Align middle",
-    "format_menu": {
+		"vertical_align_top": "Align top",
-      "auto": "Auto",
+		"format_menu": {
-      "number": "Number",
+			"auto": "Auto",
-      "percentage": "Percentage",
+			"number": "Number",
-      "currency_eur": "Euro (EUR)",
+			"percentage": "Percentage",
-      "currency_usd": "Dollar (USD)",
+			"currency_eur": "Euro (EUR)",
-      "currency_gbp": "British Pound (GBD)",
+			"currency_usd": "Dollar (USD)",
-      "date_short": "Short date",
+			"currency_gbp": "British Pound (GBD)",
-      "date_long": "Long date",
+			"date_short": "Short date",
-      "custom": "Custom",
+			"date_long": "Long date",
-      "number_example": "1,000.00",
+			"custom": "Custom",
-      "percentage_example": "10%",
+			"number_example": "1,000.00",
-      "currency_eur_example": "€",
+			"percentage_example": "10%",
-      "currency_usd_example": "$",
+			"currency_eur_example": "€",
-      "currency_gbp_example": "£",
+			"currency_usd_example": "$",
-      "date_short_example": "09/24/2024",
+			"currency_gbp_example": "£",
-      "date_long_example": "Tuesday, September 24, 2024"
+			"date_short_example": "09/24/2024",
-    },
+			"date_long_example": "Tuesday, September 24, 2024"
-    "borders": {
+		},
-      "title": "Borders",
+		"borders": {
-      "all": "All borders",
+			"title": "Borders",
-      "inner": "Inner borders",
+			"all": "All borders",
-      "outer": "Outer borders",
+			"inner": "Inner borders",
-      "top": "Top borders",
+			"outer": "Outer borders",
-      "bottom": "Bottom borders",
+			"top": "Top borders",
-      "clear": "Clear borders",
+			"bottom": "Bottom borders",
-      "left": "Left borders",
+			"clear": "Clear borders",
-      "right": "Right borders",
+			"left": "Left borders",
-      "horizontal": "Horizontal borders",
+			"right": "Right borders",
-      "vertical": "Vertical borders",
+			"horizontal": "Horizontal borders",
-      "color": "Border color",
+			"vertical": "Vertical borders",
-      "style": "Border style"
+			"color": "Border color",
-    }
+			"style": "Border style"
-  },
+		}
-  "num_fmt": {
+	},
-    "title": "Custom number format",
+	"num_fmt": {
-    "label": "Number format",
+		"title": "Custom number format",
-    "save": "Save"
+		"label": "Number format",
-  },
+		"save": "Save"
-  "sheet_rename": {
+	},
-    "rename": "Save",
+	"sheet_rename": {
-    "label": "New name",
+		"rename": "Save",
-    "title": "Rename Sheet"
+		"label": "New name",
-  },
+		"title": "Rename Sheet"
-  "formula_input": {
+	},
-    "update": "Update",
+	"formula_input": {
-    "label": "Formula",
+		"update": "Update",
-    "title": "Update formula"
+		"label": "Formula",
-  },
+		"title": "Update formula"
-  "navigation": {
+	},
-    "add_sheet": "Add sheet",
+	"navigation": {
-    "sheet_list": "Sheet list"
+		"add_sheet": "Add sheet",
-  }
+		"sheet_list": "Sheet list"
+	},
+	"name_manager_dialog": {
+		"help": "Learn more about Named Ranges"
+	}
 }