@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/variablesRenderer.js

@@ -0,0 +1,511 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/elemental/VariablesRenderer/index.ts
+var VariablesRenderer_exports = {};
+__export(VariablesRenderer_exports, {
+  Var: () => Var,
+  VarField: () => VarField
+});
+module.exports = __toCommonJS(VariablesRenderer_exports);
+
+// src/components/elemental/VariablesRenderer/Var/Var.tsx
+var import_react2 = require("react");
+
+// src/components/elemental/Overlay/src/index.ts
+var import_ClickAwayListener = __toESM(require("@mui/material/ClickAwayListener"));
+var import_Popper = __toESM(require("@mui/material/Popper"));
+
+// src/components/elemental/VariablesRenderer/Var/Var.tsx
+var import_material = require("@mui/material");
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/Icons/MuiIcon/index.ts
+var import_ArrowRightAlt = __toESM(require("@mui/icons-material/ArrowRightAlt"));
+var import_DescriptionOutlined = __toESM(require("@mui/icons-material/DescriptionOutlined"));
+var import_Description = __toESM(require("@mui/icons-material/Description"));
+var import_PictureAsPdf = __toESM(require("@mui/icons-material/PictureAsPdf"));
+var import_AudioFile = __toESM(require("@mui/icons-material/AudioFile"));
+var import_VideoFile = __toESM(require("@mui/icons-material/VideoFile"));
+var import_TableChart = __toESM(require("@mui/icons-material/TableChart"));
+var import_FolderZip = __toESM(require("@mui/icons-material/FolderZip"));
+var import_InsertDriveFile = __toESM(require("@mui/icons-material/InsertDriveFile"));
+var import_ImageOutlined = __toESM(require("@mui/icons-material/ImageOutlined"));
+var import_LayersOutlined = __toESM(require("@mui/icons-material/LayersOutlined"));
+var import_TextFormat = __toESM(require("@mui/icons-material/TextFormat"));
+var import_Remove = __toESM(require("@mui/icons-material/Remove"));
+var import_PostAdd = __toESM(require("@mui/icons-material/PostAdd"));
+var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"));
+var import_QuestionMarkOutlined = __toESM(require("@mui/icons-material/QuestionMarkOutlined"));
+var import_MeetingRoomOutlined = __toESM(require("@mui/icons-material/MeetingRoomOutlined"));
+var import_PlaylistRemove = __toESM(require("@mui/icons-material/PlaylistRemove"));
+var import_ChecklistRtl = __toESM(require("@mui/icons-material/ChecklistRtl"));
+var import_HideImageOutlined = __toESM(require("@mui/icons-material/HideImageOutlined"));
+var import_RemoveRedEyeTwoTone = __toESM(require("@mui/icons-material/RemoveRedEyeTwoTone"));
+var import_PhotoSizeSelectLarge = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_LockPersonOutlined = __toESM(require("@mui/icons-material/LockPersonOutlined"));
+var import_Person = __toESM(require("@mui/icons-material/Person"));
+var import_InsertEmoticon = __toESM(require("@mui/icons-material/InsertEmoticon"));
+var import_RemoveDoneOutlined = __toESM(require("@mui/icons-material/RemoveDoneOutlined"));
+var import_Tag = __toESM(require("@mui/icons-material/Tag"));
+var import_Audiotrack = __toESM(require("@mui/icons-material/Audiotrack"));
+var import_Videocam = __toESM(require("@mui/icons-material/Videocam"));
+var import_Code = __toESM(require("@mui/icons-material/Code"));
+var import_Equalizer = __toESM(require("@mui/icons-material/Equalizer"));
+var import_PivotTableChart = __toESM(require("@mui/icons-material/PivotTableChart"));
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_DataObject = __toESM(require("@mui/icons-material/DataObject"));
+var import_SortByAlpha = __toESM(require("@mui/icons-material/SortByAlpha"));
+var import_ThumbUp = __toESM(require("@mui/icons-material/ThumbUp"));
+var import_AttachMoneyOutlined = __toESM(require("@mui/icons-material/AttachMoneyOutlined"));
+var import_Storage = __toESM(require("@mui/icons-material/Storage"));
+var import_WorkspacePremium = __toESM(require("@mui/icons-material/WorkspacePremium"));
+var import_Numbers = __toESM(require("@mui/icons-material/Numbers"));
+var import_Functions = __toESM(require("@mui/icons-material/Functions"));
+var import_Lightbulb = __toESM(require("@mui/icons-material/Lightbulb"));
+var import_CropRotate = __toESM(require("@mui/icons-material/CropRotate"));
+var import_PhotoSizeSelectLarge2 = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_CollectionsBookmark = __toESM(require("@mui/icons-material/CollectionsBookmark"));
+var import_Schedule = __toESM(require("@mui/icons-material/Schedule"));
+var import_Style = __toESM(require("@mui/icons-material/Style"));
+var import_Crop169 = __toESM(require("@mui/icons-material/Crop169"));
+var import_CropSquare = __toESM(require("@mui/icons-material/CropSquare"));
+var import_GraphicEqRounded = __toESM(require("@mui/icons-material/GraphicEqRounded"));
+var import_MemoryRounded = __toESM(require("@mui/icons-material/MemoryRounded"));
+var import_AddCircleOutlineRounded = __toESM(require("@mui/icons-material/AddCircleOutlineRounded"));
+var import_Add = __toESM(require("@mui/icons-material/Add"));
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_Autorenew = __toESM(require("@mui/icons-material/Autorenew"));
+var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
+var import_Menu = __toESM(require("@mui/icons-material/Menu"));
+var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"));
+var import_MoreHoriz = __toESM(require("@mui/icons-material/MoreHoriz"));
+var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
+var import_ContentPaste = __toESM(require("@mui/icons-material/ContentPaste"));
+var import_Cloud = __toESM(require("@mui/icons-material/Cloud"));
+var import_DownloadOutlined = __toESM(require("@mui/icons-material/DownloadOutlined"));
+var import_DownloadDoneOutlined = __toESM(require("@mui/icons-material/DownloadDoneOutlined"));
+var import_StarBorderOutlined = __toESM(require("@mui/icons-material/StarBorderOutlined"));
+var import_DeleteForever = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_LayersClear = __toESM(require("@mui/icons-material/LayersClear"));
+var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_DoneAll = __toESM(require("@mui/icons-material/DoneAll"));
+var import_PowerSettingsNew = __toESM(require("@mui/icons-material/PowerSettingsNew"));
+var import_Send = __toESM(require("@mui/icons-material/Send"));
+var import_ZoomInMap = __toESM(require("@mui/icons-material/ZoomInMap"));
+var import_ZoomOutMap = __toESM(require("@mui/icons-material/ZoomOutMap"));
+var import_HomeRepairService = __toESM(require("@mui/icons-material/HomeRepairService"));
+var import_Construction = __toESM(require("@mui/icons-material/Construction"));
+var import_Help = __toESM(require("@mui/icons-material/Help"));
+var import_EmojiFlags = __toESM(require("@mui/icons-material/EmojiFlags"));
+var import_Edit = __toESM(require("@mui/icons-material/Edit"));
+var import_ForkRight = __toESM(require("@mui/icons-material/ForkRight"));
+var import_Settings = __toESM(require("@mui/icons-material/Settings"));
+var import_Restore = __toESM(require("@mui/icons-material/Restore"));
+var import_EditNote = __toESM(require("@mui/icons-material/EditNote"));
+var import_HomeOutlined = __toESM(require("@mui/icons-material/HomeOutlined"));
+var import_ExitToAppOutlined = __toESM(require("@mui/icons-material/ExitToAppOutlined"));
+var import_WbSunnyOutlined = __toESM(require("@mui/icons-material/WbSunnyOutlined"));
+var import_DarkModeOutlined = __toESM(require("@mui/icons-material/DarkModeOutlined"));
+var import_AttachFileOutlined = __toESM(require("@mui/icons-material/AttachFileOutlined"));
+var import_NoteAdd = __toESM(require("@mui/icons-material/NoteAdd"));
+var import_CloudUpload = __toESM(require("@mui/icons-material/CloudUpload"));
+var import_KeyboardDoubleArrowRight = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRight"));
+var import_KeyboardDoubleArrowLeft = __toESM(require("@mui/icons-material/KeyboardDoubleArrowLeft"));
+var import_KeyboardDoubleArrowRightRounded = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRightRounded"));
+var import_FitScreen = __toESM(require("@mui/icons-material/FitScreen"));
+var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
+var import_Biotech = __toESM(require("@mui/icons-material/Biotech"));
+var import_Share = __toESM(require("@mui/icons-material/Share"));
+var import_FilterAlt = __toESM(require("@mui/icons-material/FilterAlt"));
+var import_Sync = __toESM(require("@mui/icons-material/Sync"));
+var import_PlayArrow = __toESM(require("@mui/icons-material/PlayArrow"));
+var import_PauseOutlined = __toESM(require("@mui/icons-material/PauseOutlined"));
+var import_Casino = __toESM(require("@mui/icons-material/Casino"));
+var import_Paid = __toESM(require("@mui/icons-material/Paid"));
+var import_Save = __toESM(require("@mui/icons-material/Save"));
+var import_StopRounded = __toESM(require("@mui/icons-material/StopRounded"));
+var import_Replay = __toESM(require("@mui/icons-material/Replay"));
+var import_AccountTree = __toESM(require("@mui/icons-material/AccountTree"));
+var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_KeyboardArrowRight = __toESM(require("@mui/icons-material/KeyboardArrowRight"));
+var import_SearchRounded = __toESM(require("@mui/icons-material/SearchRounded"));
+var import_CloseRounded = __toESM(require("@mui/icons-material/CloseRounded"));
+var import_SortByAlphaRounded = __toESM(require("@mui/icons-material/SortByAlphaRounded"));
+var import_FilterAltOutlined = __toESM(require("@mui/icons-material/FilterAltOutlined"));
+var import_InboxOutlined = __toESM(require("@mui/icons-material/InboxOutlined"));
+var import_SearchOff = __toESM(require("@mui/icons-material/SearchOff"));
+var import_ClearRounded = __toESM(require("@mui/icons-material/ClearRounded"));
+var import_ArrowDropDownRounded = __toESM(require("@mui/icons-material/ArrowDropDownRounded"));
+var import_AccountBox = __toESM(require("@mui/icons-material/AccountBox"));
+var import_Logout = __toESM(require("@mui/icons-material/Logout"));
+var import_Login = __toESM(require("@mui/icons-material/Login"));
+var import_Dashboard = __toESM(require("@mui/icons-material/Dashboard"));
+var import_AccountTreeOutlined = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_HelpOutline = __toESM(require("@mui/icons-material/HelpOutline"));
+var import_NavigateBefore = __toESM(require("@mui/icons-material/NavigateBefore"));
+var import_NavigateNext = __toESM(require("@mui/icons-material/NavigateNext"));
+var import_Person2 = __toESM(require("@mui/icons-material/Person"));
+var import_CalendarToday = __toESM(require("@mui/icons-material/CalendarToday"));
+var import_QuestionAnswerOutlined = __toESM(require("@mui/icons-material/QuestionAnswerOutlined"));
+var import_Today = __toESM(require("@mui/icons-material/Today"));
+var import_DeleteForever2 = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_AdsClick = __toESM(require("@mui/icons-material/AdsClick"));
+var import_Fingerprint = __toESM(require("@mui/icons-material/Fingerprint"));
+var import_SportsEsportsOutlined = __toESM(require("@mui/icons-material/SportsEsportsOutlined"));
+var import_HelpOutlineRounded = __toESM(require("@mui/icons-material/HelpOutlineRounded"));
+var import_AccountTreeOutlined2 = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_SmartToyOutlined = __toESM(require("@mui/icons-material/SmartToyOutlined"));
+var import_AcUnit = __toESM(require("@mui/icons-material/AcUnit"));
+var import_Loop = __toESM(require("@mui/icons-material/Loop"));
+var import_Pending = __toESM(require("@mui/icons-material/Pending"));
+var import_AllInclusive = __toESM(require("@mui/icons-material/AllInclusive"));
+var import_WarningOutlined = __toESM(require("@mui/icons-material/WarningOutlined"));
+var import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"));
+var import_AutoAwesomeRounded = __toESM(require("@mui/icons-material/AutoAwesomeRounded"));
+var import_ErrorOutlineOutlined = __toESM(require("@mui/icons-material/ErrorOutlineOutlined"));
+var import_Download = __toESM(require("@mui/icons-material/Download"));
+
+// src/components/elemental/Input/src/LineInput.tsx
+var import_react = require("react");
+var import_styles = require("@mui/material/styles");
+var import_TextField = __toESM(require("@mui/material/TextField"));
+
+// src/components/elemental/Input/src/lineInputTheme.ts
+var lineInputVars = {
+  "--line-input-bg": "var(--mui-palette-background-default)",
+  "--line-input-divider": "var(--mui-palette-divider)",
+  "--line-input-text-primary": "var(--mui-palette-text-primary)",
+  "--line-input-text-secondary": "var(--mui-palette-text-secondary)",
+  "--line-input-error": "var(--mui-palette-error-main)"
+};
+
+// src/components/elemental/Input/src/LineInput.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LineInput = (0, import_react.forwardRef)(({
+  value,
+  label,
+  style,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DefaultStyled,
+    {
+      value,
+      label,
+      ...props,
+      ref,
+      variant: "standard",
+      style: {
+        "--mt-scale": label ? 2 : 0,
+        ...style
+      }
+    }
+  );
+});
+var LineInput_default = LineInput;
+var DefaultStyled = (0, import_styles.styled)(import_TextField.default)(
+  () => ({
+    "&.MuiTextField-root": {
+      ...lineInputVars,
+      flex: 1,
+      "& .MuiInput-input": {
+        paddingTop: 0,
+        paddingBottom: 0
+      },
+      "& .MuiInput-root::before": {
+        borderBottomColor: "var(--line-input-divider)"
+      },
+      "& .MuiOutlinedInput-root": {
+        color: "var(--line-input-text-primary)",
+        "& fieldset": {
+          border: "unset",
+          boxShadow: "inset 0 0 0 2px var(--line-input-divider)",
+          color: "var(--line-input-text-secondary)"
+        },
+        "&:hover fieldset": {
+          border: "unset",
+          boxShadow: "inset 0 0 0 2px var(--line-input-text-secondary)"
+        },
+        "&.Mui-focused fieldset": {
+          border: "unset",
+          boxShadow: "inset 0 0 0 2px var(--line-input-text-secondary)"
+        }
+      },
+      "& .MuiInputLabel-root": {
+        border: "unset",
+        backgroundColor: "var(--line-input-bg)",
+        color: "var(--line-input-text-secondary)",
+        "&.Mui-focused": {
+          color: "var(--line-input-text-secondary)"
+        },
+        "&.Mui-focused.Mui-error": {
+          color: "var(--line-input-error)"
+        }
+      },
+      // hide placeholder ghost bug fix with css
+      // https://mui.com/material-ui/react-text-field/#shrink
+      // hide placeholder ghost
+      ' & .MuiInputLabel-root:not([data-shrink="true"])~.MuiInputBase-root>.MuiInputBase-input': {
+        color: "transparent"
+      },
+      "& .MuiFormHelperText-root": {
+        color: "var(--line-input-text-primary)"
+      },
+      "& .Mui-error": {
+        color: "var(--line-input-error)"
+      },
+      "& .MuiInputBase-root": {
+        fontSize: "inherit",
+        color: "var(--line-input-text-primary)",
+        marginTop: `calc(8px * var(--mt-scale))`
+      },
+      "& .MuiInputBase-root:after": {
+        borderColor: "var(--line-input-text-primary)"
+      }
+    }
+  })
+);
+
+// src/components/elemental/VariablesRenderer/theme.ts
+var varDisplayRootStyle = {
+  "--var-border-color": "var(--mui-palette-text-href)"
+};
+
+// src/components/elemental/VariablesRenderer/Var/Var.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DisplaySpan = (0, import_material.styled)("span", {
+  shouldForwardProp: (prop) => prop !== "editMode"
+})(() => ({
+  ...varDisplayRootStyle,
+  borderBottom: "1px dotted var(--var-border-color)",
+  lineHeight: 1,
+  fontStyle: "italic",
+  margin: "0 2px",
+  maxWidth: "300px",
+  overflow: "hidden",
+  display: "inline-flex",
+  "&>a>span": {
+    padding: "0 2px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "pre"
+  },
+  variants: [
+    {
+      props: { editMode: true },
+      style: { display: "none" }
+    }
+  ]
+}));
+function Var({
+  defaultValue,
+  currentValue,
+  updateValue,
+  onChangeUpdate = false
+}) {
+  const [editMode, setEditMode] = (0, import_react2.useState)(false);
+  const firstRenderRef = (0, import_react2.useRef)(true);
+  const [tmpVar, setTmpVar] = (0, import_react2.useState)(defaultValue);
+  const tmpVarRef = (0, import_react2.useRef)(tmpVar);
+  const updateValueRef = (0, import_react2.useRef)(updateValue);
+  tmpVarRef.current = tmpVar;
+  updateValueRef.current = updateValue;
+  const onChange = (e) => {
+    setTmpVar(e.target.value);
+    if (onChangeUpdate) {
+      updateValue(e.target.value);
+    }
+  };
+  (0, import_react2.useEffect)(() => {
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false;
+      return;
+    }
+    if (editMode) {
+      setTmpVar(currentValue);
+      return;
+    }
+    if (!editMode) {
+      if (typeof tmpVarRef.current === "string") {
+        return updateValueRef.current(tmpVarRef.current);
+      }
+    }
+  }, [editMode, currentValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DisplaySpan, { editMode, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_Box.default,
+      {
+        component: "a",
+        onClick: (e) => {
+          e.preventDefault();
+          setEditMode(true);
+        },
+        sx: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4px",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { component: "span", sx: { flex: 1 }, children: currentValue }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Edit.default, { sx: { "&.MuiSvgIcon-root": { fontSize: "inherit" } } }) })
+        ]
+      }
+    ) }),
+    editMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_Box.default,
+      {
+        component: "span",
+        sx: {
+          display: "inline-flex",
+          padding: "0 8px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ClickAwayListener.default, { onClickAway: () => setEditMode(false), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          LineInput_default,
+          {
+            value: tmpVar,
+            size: "small",
+            margin: "none",
+            autoFocus: true,
+            onChange,
+            InputProps: {
+              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Edit.default, { sx: { "&.MuiSvgIcon-root": { fontSize: "inherit" } } })
+            },
+            sx: {
+              "&.MuiFormControl-root.MuiTextField-root": {
+                justifyContent: "center"
+              }
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                setEditMode(false);
+                if (typeof tmpVar === "string") {
+                  updateValue(tmpVar);
+                }
+              }
+              if (e.key === "Escape") {
+                setEditMode(false);
+                setTmpVar(currentValue);
+              }
+            }
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+// src/components/elemental/VariablesRenderer/Var/VarField.tsx
+var import_react3 = require("react");
+var import_material2 = require("@mui/material");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DisplaySpan2 = (0, import_material2.styled)("span", {
+  shouldForwardProp: (prop) => prop !== "editMode"
+})(() => ({
+  ...varDisplayRootStyle,
+  borderBottom: "1px dotted var(--var-border-color)",
+  lineHeight: 1,
+  fontStyle: "italic",
+  margin: "0 2px",
+  display: "inline-flex",
+  "&>a>span": { padding: "0 2px" },
+  variants: [
+    {
+      props: { editMode: true },
+      style: { display: "none" }
+    }
+  ]
+}));
+function VarField({
+  currentValue,
+  Editor,
+  updateValue,
+  Display,
+  extraButton
+}) {
+  const [editMode, setEditMode] = (0, import_react3.useState)(false);
+  const firstRenderRef = (0, import_react3.useRef)(true);
+  const [tmpVar, setTmpVar] = (0, import_react3.useState)(currentValue);
+  const tmpVarRef = (0, import_react3.useRef)(tmpVar);
+  const updateValueRef = (0, import_react3.useRef)(updateValue);
+  tmpVarRef.current = tmpVar;
+  updateValueRef.current = updateValue;
+  (0, import_react3.useEffect)(() => {
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false;
+      return;
+    }
+    if (!editMode) {
+      updateValueRef.current(tmpVarRef.current);
+    }
+  }, [editMode]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DisplaySpan2, { editMode, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_Box.default,
+      {
+        component: "a",
+        onClick: () => setEditMode(true),
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Display, { value: tmpVar }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box.default, { component: "span", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Edit.default, { sx: { "&.MuiSvgIcon-root": { fontSize: "inherit" } } }) }),
+          extraButton
+        ]
+      }
+    ) }),
+    editMode && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_Box.default,
+      {
+        component: "span",
+        sx: {
+          display: "inline-flex",
+          padding: "0 8px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ClickAwayListener.default, { onClickAway: () => setEditMode(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Editor, { setTmp: setTmpVar, tempValue: tmpVar }) }) })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Var,
+  VarField
+});
+//# sourceMappingURL=variablesRenderer.js.map

package/dist/variablesRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/elemental/VariablesRenderer/index.ts","../src/components/elemental/VariablesRenderer/Var/Var.tsx","../src/components/elemental/Overlay/src/index.ts","../src/components/elemental/Box/src/index.ts","../src/components/Icons/MuiIcon/index.ts","../src/components/elemental/Input/src/LineInput.tsx","../src/components/elemental/Input/src/lineInputTheme.ts","../src/components/elemental/VariablesRenderer/theme.ts","../src/components/elemental/VariablesRenderer/Var/VarField.tsx"],"sourcesContent":["export {\n  Var,\n  VarField,\n} from './Var'\n","'use client'\nimport { useState, useEffect, useRef } from 'react'\nimport { ClickAwayListener } from '@/ele/Overlay'\nimport { styled } from '@mui/material'\nimport type {Signal} from '@preact/signals-react'\n\nimport { LineInput } from '@/ele/Input'\nimport { EditIcon } from '@/icons/MuiIcon'\nimport { Box } from '@/ele/Box'\nimport { varDisplayRootStyle } from '../theme'\n\nconst DisplaySpan = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'editMode',\n})<{ editMode: boolean }>(() => ({\n  ...varDisplayRootStyle,\n  borderBottom: \"1px dotted var(--var-border-color)\",\n  lineHeight: 1,\n  fontStyle: \"italic\",\n  margin: \"0 2px\",\n  maxWidth: \"300px\",\n  overflow: \"hidden\",\n  display: \"inline-flex\",\n  \"&>a>span\": {\n    padding: \"0 2px\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"pre\",\n  },\n  variants: [\n    {\n      props: { editMode: true },\n      style: { display: 'none' },\n    },\n  ],\n}))\n\n/**\n * A component that share the same variable accross the app\n * \n * @param defaultValue The default value of the variable\n * @param currentValue The current value of the variable\n * @param updateValue The function to update the variable\n * @param onChangeUpdate If true, the variable will be updated on change\n * \n */\nexport default function Var({\n  defaultValue, currentValue, updateValue, onChangeUpdate = false\n}: {\n  defaultValue: string | Signal<string>,\n  currentValue: string | Signal<string>,\n  updateValue: (value: string) => void,\n  onChangeUpdate?: boolean,\n}) {\n  const [editMode, setEditMode] = useState(false)\n  const firstRenderRef = useRef(true)\n  const [tmpVar, setTmpVar] = useState(defaultValue)\n  const tmpVarRef = useRef(tmpVar)\n  const updateValueRef = useRef(updateValue)\n  tmpVarRef.current = tmpVar\n  updateValueRef.current = updateValue\n\n  const onChange: React.ComponentProps<typeof LineInput>[\"onChange\"] = (e) => {\n    setTmpVar(e.target.value)\n    if (onChangeUpdate) {\n      // update the current value on change to avoid data inconsistency\n      updateValue(e.target.value)\n    }\n  }\n\n  useEffect(() => {\n    if (firstRenderRef.current) {\n      firstRenderRef.current = false\n      return\n    }\n\n    if (editMode) {\n      // reset value to current value\n      setTmpVar(currentValue)\n      return\n    }\n    if (!editMode) {\n      // if current value is a string set the value directly\n      if (typeof tmpVarRef.current === \"string\") {\n        // update the current value\n        return updateValueRef.current(tmpVarRef.current)\n      }\n      // if current value is a signal, do nothing \n      // beacause this implies that the input is no modified\n    }\n    // only update when start editing or stop editing\n  }, [editMode, currentValue])\n\n  return (\n    <>\n      <DisplaySpan editMode={editMode}>\n        <Box component=\"a\" onClick={(e) => {\n          e.preventDefault()\n          setEditMode(true)\n        }}\n          sx={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            gap: \"4px\",\n            overflow: \"hidden\",\n          }}>\n          <Box component=\"span\" sx={{ flex: 1 }}>{currentValue}</Box>\n          <Box component=\"span\"><EditIcon sx={{ \"&.MuiSvgIcon-root\": { fontSize: \"inherit\" } }} /></Box>\n        </Box>\n      </DisplaySpan>\n\n      {editMode && <Box component=\"span\"\n        sx={{\n          display: 'inline-flex',\n          padding: \"0 8px\",\n        }}>\n        <ClickAwayListener onClickAway={() => setEditMode(false)}>\n\n          <LineInput value={tmpVar} size=\"small\"\n            margin=\"none\"\n            autoFocus\n            onChange={onChange}\n            InputProps={{\n              endAdornment: <EditIcon sx={{ \"&.MuiSvgIcon-root\": { fontSize: \"inherit\" } }} />,\n            }}\n            sx={{\n              \"&.MuiFormControl-root.MuiTextField-root\": {\n                justifyContent: \"center\",\n              }\n            }}\n            onKeyDown={(e) => {\n              // if enter is pressed, update the value and exit edit mode\n              if (e.key === \"Enter\") {\n                setEditMode(false)\n                // update the value\n                if (typeof tmpVar === \"string\") {\n                  updateValue(tmpVar)\n                }\n              }\n              // if escape is pressed, exit edit mode\n              if (e.key === \"Escape\") {\n                setEditMode(false)\n                // reset the value to current value\n                setTmpVar(currentValue)\n              }\n            }}\n          />\n\n        </ClickAwayListener>\n      </Box>}\n    </>\n  )\n}\n","export { default as ClickAwayListener } from '@mui/material/ClickAwayListener';\nexport { default as Popper } from '@mui/material/Popper';\n","export * from './BorderBox'\nexport {default as Box} from '@mui/material/Box'\nexport {default as Stack} from '@mui/material/Stack'\nexport {default as Grid} from '@mui/material/Grid'\n","// display\nexport {default as ArrowIcon} from '@mui/icons-material/ArrowRightAlt'\nexport {default as FileIcon} from '@mui/icons-material/DescriptionOutlined'\nexport {default as DescriptionIcon} from '@mui/icons-material/Description'\nexport {default as PictureAsPdfIcon} from '@mui/icons-material/PictureAsPdf'\nexport {default as AudioFileIcon} from '@mui/icons-material/AudioFile'\nexport {default as VideoFileIcon} from '@mui/icons-material/VideoFile'\nexport {default as TableChartIcon} from '@mui/icons-material/TableChart'\nexport {default as FolderZipIcon} from '@mui/icons-material/FolderZip'\nexport {default as InsertDriveFileIcon} from '@mui/icons-material/InsertDriveFile'\nexport {default as ImageIcon} from '@mui/icons-material/ImageOutlined'\nexport {default as LayersIcon} from '@mui/icons-material/LayersOutlined'\nexport {default as TextIcon} from '@mui/icons-material/TextFormat'\nexport {default as RemoveIcon} from '@mui/icons-material/Remove'\nexport {default as AddFileIcon} from '@mui/icons-material/PostAdd'\nexport {default as ErrorIcon} from '@mui/icons-material/ErrorOutline'\nexport {default as QuestionIcon} from '@mui/icons-material/QuestionMarkOutlined'\nexport {default as RoomIcon} from '@mui/icons-material/MeetingRoomOutlined'\nexport {default as BlacklistIcon} from '@mui/icons-material/PlaylistRemove'\nexport {default as WhitelistIcon} from '@mui/icons-material/ChecklistRtl'\nexport {default as NoImageIcon} from '@mui/icons-material/HideImageOutlined'\nexport {default as EyeIcon} from '@mui/icons-material/RemoveRedEyeTwoTone'\nexport {default as CropSizeIcon} from '@mui/icons-material/PhotoSizeSelectLarge'\nexport {default as AdminIcon} from '@mui/icons-material/LockPersonOutlined'\nexport {default as UserIcon} from '@mui/icons-material/Person'\nexport {default as EmoticonIcon} from '@mui/icons-material/InsertEmoticon'\nexport {default as DisabledSelectionIcon} from '@mui/icons-material/RemoveDoneOutlined'\nexport {default as TagIcon} from '@mui/icons-material/Tag'\nexport {default as AudioIcon} from '@mui/icons-material/Audiotrack'\nexport {default as VideoIcon} from '@mui/icons-material/Videocam'\nexport {default as CodeIcon} from '@mui/icons-material/Code'\nexport {default as ChartIcon} from '@mui/icons-material/Equalizer'\nexport {default as TableIcon} from '@mui/icons-material/PivotTableChart'\nexport {default as SearchIcon} from '@mui/icons-material/Search'\nexport {default as DataObjectIcon} from '@mui/icons-material/DataObject'\nexport {default as A2ZIcon} from '@mui/icons-material/SortByAlpha'\nexport {default as ThumbUpIcon} from '@mui/icons-material/ThumbUp'\nexport {default as MoneyIcon} from '@mui/icons-material/AttachMoneyOutlined'\nexport {default as ServerIcon} from '@mui/icons-material/Storage'\nexport {default as CerticateIcon} from '@mui/icons-material/WorkspacePremium'\nexport {default as NumberIcon} from '@mui/icons-material/Numbers'\nexport {default as SumIcon} from '@mui/icons-material/Functions'\nexport {default as LightBulbIcon} from '@mui/icons-material/Lightbulb'\nexport {default as RotateIcon} from '@mui/icons-material/CropRotate'\nexport {default as ImageSzieScaleIcon} from '@mui/icons-material/PhotoSizeSelectLarge'\nexport {default as CollectionIcon} from '@mui/icons-material/CollectionsBookmark'\nexport {default as HistoryIcon} from '@mui/icons-material/Schedule'\nexport {default as StyleIcon} from '@mui/icons-material/Style'\nexport {default as ARHorizontalIcon} from '@mui/icons-material/Crop169'\nexport {default as ARSquareIcon} from '@mui/icons-material/CropSquare'\nexport {default as VoiceIcon} from '@mui/icons-material/GraphicEqRounded'\nexport {default as MemoryIcon} from '@mui/icons-material/MemoryRounded'\n\n// button\nexport {default as AddCircleIcon} from '@mui/icons-material/AddCircleOutlineRounded'\nexport {default as AddIcon} from '@mui/icons-material/Add'\nexport {default as CloseIcon} from '@mui/icons-material/Close'\nexport {default as ExpandMoreIcon} from '@mui/icons-material/ExpandMore'\nexport {default as AutorenewIcon} from '@mui/icons-material/Autorenew'\nexport {default as CheckCircleIcon} from '@mui/icons-material/CheckCircle'\nexport {default as MenuIcon} from '@mui/icons-material/Menu'\nexport {default as MoreIcon} from '@mui/icons-material/MoreVert'\nexport {default as MoreHorizIcon} from '@mui/icons-material/MoreHoriz'\nexport {default as CopyIcon} from '@mui/icons-material/ContentCopy'\nexport {default as PasteIcon} from '@mui/icons-material/ContentPaste'\nexport {default as CloudIcon} from '@mui/icons-material/Cloud'\nexport {default as DownloadIcon} from '@mui/icons-material/DownloadOutlined'\nexport {default as DownloadDoneIcon} from '@mui/icons-material/DownloadDoneOutlined'\nexport {default as StartIcon} from '@mui/icons-material/StarBorderOutlined'\nexport {default as DeleteIcon} from '@mui/icons-material/DeleteForever'\nexport {default as LayerClearIcon } from '@mui/icons-material/LayersClear'\nexport {default as CheckIcon } from '@mui/icons-material/Check'\nexport {default as CheckAllIcon } from '@mui/icons-material/DoneAll'\nexport {default as PowerIcon } from '@mui/icons-material/PowerSettingsNew'\nexport {default as SendIcon } from '@mui/icons-material/Send'\nexport {default as ZoomInIcon } from '@mui/icons-material/ZoomInMap'\nexport {default as ZoomOutIcon } from '@mui/icons-material/ZoomOutMap'\nexport {default as ToolIcon } from '@mui/icons-material/HomeRepairService'\nexport {default as ConstructionIcon } from '@mui/icons-material/Construction'\nexport {default as HelpIcon } from '@mui/icons-material/Help'\nexport {default as ReportIcon } from '@mui/icons-material/EmojiFlags'\nexport {default as EditIcon } from '@mui/icons-material/Edit'\nexport {default as ForkIcon } from '@mui/icons-material/ForkRight'\nexport {default as SettingIcon } from '@mui/icons-material/Settings'\nexport {default as RestoreIcon } from '@mui/icons-material/Restore'\nexport {default as EditListIcon } from '@mui/icons-material/EditNote'\nexport {default as HomeIcon } from '@mui/icons-material/HomeOutlined'\nexport {default as EnterRoomIcon } from '@mui/icons-material/ExitToAppOutlined'\nexport {default as SunIcon} from '@mui/icons-material/WbSunnyOutlined'\nexport {default as MoonIcon} from '@mui/icons-material/DarkModeOutlined'\nexport {default as AttachFileIcon} from '@mui/icons-material/AttachFileOutlined'\nexport {default as NoteAddIcon} from '@mui/icons-material/NoteAdd'\nexport {default as CloudUploadIcon} from '@mui/icons-material/CloudUpload'\nexport {default as DoubleRightArrowIcon} from '@mui/icons-material/KeyboardDoubleArrowRight'\nexport {default as DoubleLeftArrowIcon} from '@mui/icons-material/KeyboardDoubleArrowLeft'\nexport {default as DoubleArrowIcon} from '@mui/icons-material/KeyboardDoubleArrowRightRounded'\nexport {default as FitScreenIcon} from '@mui/icons-material/FitScreen'\nexport {default as FullscreenIcon} from '@mui/icons-material/Fullscreen'\nexport {default as TestIcon} from '@mui/icons-material/Biotech'\nexport {default as ShareIcon} from '@mui/icons-material/Share'\nexport {default as FilterIcon}  from '@mui/icons-material/FilterAlt'\nexport {default as SyncIcon} from '@mui/icons-material/Sync'\nexport {default as PlayIcon} from '@mui/icons-material/PlayArrow'\nexport {default as PauseIcon} from '@mui/icons-material/PauseOutlined'\nexport {default as RandomIcon} from '@mui/icons-material/Casino'\nexport {default as CoinIcon} from '@mui/icons-material/Paid'\nexport {default as SaveChangesIcon} from '@mui/icons-material/Save'\nexport {default as StopIcon} from '@mui/icons-material/StopRounded'\nexport {default as ReplayIcon}  from '@mui/icons-material/Replay'\nexport {default as TreeIcon} from '@mui/icons-material/AccountTree'\nexport {default as ClearIcon} from '@mui/icons-material/Close'\nexport {default as KeyboardArrowDownIcon} from '@mui/icons-material/KeyboardArrowDown'\nexport {default as KeyboardArrowRightIcon} from '@mui/icons-material/KeyboardArrowRight'\nexport {default as SearchRoundedIcon} from '@mui/icons-material/SearchRounded'\nexport {default as CloseRoundedIcon} from '@mui/icons-material/CloseRounded'\nexport {default as SortByAlphaRoundedIcon} from '@mui/icons-material/SortByAlphaRounded'\nexport {default as FilterAltOutlinedIcon} from '@mui/icons-material/FilterAltOutlined'\nexport {default as InboxOutlinedIcon} from '@mui/icons-material/InboxOutlined'\nexport {default as SearchOffIcon} from '@mui/icons-material/SearchOff'\nexport {default as ClearRoundedIcon} from '@mui/icons-material/ClearRounded'\nexport {default as ArrowDropDownRoundedIcon} from '@mui/icons-material/ArrowDropDownRounded'\n\n// login\nexport {default as AccountIcon} from '@mui/icons-material/AccountBox'\nexport {default as LogoutIcon} from '@mui/icons-material/Logout'\nexport {default as LoginIcon} from '@mui/icons-material/Login'\nexport {default as DashboardIcon} from '@mui/icons-material/Dashboard'\n\n//logo\nexport {default as WorkFlowIcon} from '@mui/icons-material/AccountTreeOutlined'\nexport {default as HelpOutlineIcon} from '@mui/icons-material/HelpOutline'\nexport {default as NavigateBeforeIcon} from '@mui/icons-material/NavigateBefore'\nexport {default as NavigateNextIcon} from '@mui/icons-material/NavigateNext'\nexport {default as PersonIcon} from '@mui/icons-material/Person'\nexport {default as CalendarTodayIcon} from '@mui/icons-material/CalendarToday'\nexport {default as ChatIcon} from '@mui/icons-material/QuestionAnswerOutlined'\nexport {default as TodayIcon} from '@mui/icons-material/Today'\nexport {default as DeleteForeverIcon} from '@mui/icons-material/DeleteForever'\n\nexport {default as AdsClickIcon} from '@mui/icons-material/AdsClick'\nexport {default as FingerprintIcon} from '@mui/icons-material/Fingerprint'\nexport {default as SportsEsportsOutlinedIcon} from '@mui/icons-material/SportsEsportsOutlined'\nexport {default as HelpOutlineRoundedIcon} from '@mui/icons-material/HelpOutlineRounded'\nexport {default as AccountTreeOutlinedIcon} from '@mui/icons-material/AccountTreeOutlined'\nexport {default as SmartToyOutlinedIcon} from '@mui/icons-material/SmartToyOutlined'\nexport {default as AcUnitIcon} from '@mui/icons-material/AcUnit'\nexport {default as LoopIcon} from '@mui/icons-material/Loop'\nexport {default as PendingIcon} from '@mui/icons-material/Pending'\nexport {default as AllInclusiveIcon} from '@mui/icons-material/AllInclusive'\nexport {default as WarningOutlinedIcon} from '@mui/icons-material/WarningOutlined'\nexport {default as InfoOutlinedIcon} from '@mui/icons-material/InfoOutlined'\nexport {default as AutoAwesomeRoundedIcon} from '@mui/icons-material/AutoAwesomeRounded'\nexport {default as ErrorOutlineOutlinedIcon} from '@mui/icons-material/ErrorOutlineOutlined'\nexport {default as DownloadFilledIcon} from '@mui/icons-material/Download'","'use client'\nimport { forwardRef } from 'react'\nimport { styled } from '@mui/material/styles'\nimport TextField, { type TextFieldProps } from '@mui/material/TextField'\nimport { lineInputVars } from './lineInputTheme'\n\ntype Props = {\n    multiline?: boolean;\n    rows?: number;\n    margin?: 'dense' | 'normal' | 'none';\n    size?: 'small' | 'medium';\n    label?: string;\n} & TextFieldProps\n/**\n * A TextField Variant \n * \n * `variant=\"standard\"`\n * \n * [Doc](https://mui.com/material-ui/api/text-field/)\n */\nconst LineInput = forwardRef<HTMLInputElement,Props>(({\n    value,label,style,...props\n},ref) => {\n    return (\n        <DefaultStyled value={value} label={label} {...props} ref={ref}\n        variant=\"standard\"\n        style={{\n            '--mt-scale':label?2:0,\n            ...style,\n        } as React.CSSProperties}\n        />\n    )\n})\n\nexport default LineInput\n\nconst DefaultStyled = styled(TextField)(\n    ()=>({\n        \"&.MuiTextField-root\":{\n            ...lineInputVars,\n            flex: 1,\n            \"& .MuiInput-input\":{\n                paddingTop:0,paddingBottom:0,\n            },\n            \"& .MuiInput-root::before\":{\n                borderBottomColor:\"var(--line-input-divider)\",\n            },\n            \"& .MuiOutlinedInput-root\": {\n                color:\"var(--line-input-text-primary)\",\n                '& fieldset': {\n                    border: 'unset',\n                    boxShadow:\"inset 0 0 0 2px var(--line-input-divider)\",\n                    color: \"var(--line-input-text-secondary)\",\n                },\n                '&:hover fieldset': {\n                    border: 'unset',\n                    boxShadow:\"inset 0 0 0 2px var(--line-input-text-secondary)\",\n                },\n                '&.Mui-focused fieldset': {\n                    border: 'unset',\n                    boxShadow:\"inset 0 0 0 2px var(--line-input-text-secondary)\",\n                },\n            },\n            \"& .MuiInputLabel-root\": {\n                border: \"unset\",\n                backgroundColor: \"var(--line-input-bg)\",\n                color: \"var(--line-input-text-secondary)\",\n                \"&.Mui-focused\":{\n                    color: \"var(--line-input-text-secondary)\",\n                },\n                \"&.Mui-focused.Mui-error\":{\n                    color: \"var(--line-input-error)\",\n                }\n            },\n            // hide placeholder ghost bug fix with css\n            // https://mui.com/material-ui/react-text-field/#shrink\n            // hide placeholder ghost\n            ' & .MuiInputLabel-root:not([data-shrink=\"true\"])~.MuiInputBase-root>.MuiInputBase-input':{\n                color:\"transparent\",\n            },\n            \"& .MuiFormHelperText-root\":{\n                color:\"var(--line-input-text-primary)\",\n            },\n            \"& .Mui-error\":{\n                color: \"var(--line-input-error)\",\n            },\n            \"& .MuiInputBase-root\":{\n                fontSize:\"inherit\",\n                color:\"var(--line-input-text-primary)\",\n                marginTop: `calc(8px * var(--mt-scale))`,\n            },\n    \n            \"& .MuiInputBase-root:after\":{\n                borderColor:\"var(--line-input-text-primary)\",\n            },\n        },\n    })\n)\n","/**\n * Root-level CSS variable aliases for LineInput.\n * Spread inside DefaultStyled's root selector; palette refs are declared only here.\n */\nexport const lineInputVars = {\n  '--line-input-bg': 'var(--mui-palette-background-default)',\n  '--line-input-divider': 'var(--mui-palette-divider)',\n  '--line-input-text-primary': 'var(--mui-palette-text-primary)',\n  '--line-input-text-secondary': 'var(--mui-palette-text-secondary)',\n  '--line-input-error': 'var(--mui-palette-error-main)',\n} as const\n","export const varDisplayRootStyle = {\n  '--var-border-color': 'var(--mui-palette-text-href)',\n} as const\n","'use client'\nimport { useState, useEffect, useRef } from 'react'\nimport { ClickAwayListener } from '@/ele/Overlay'\nimport { styled } from '@mui/material'\n\nimport { EditIcon } from '@/icons/MuiIcon'\nimport { Box } from '@/ele/Box'\nimport { varDisplayRootStyle } from '../theme'\n\nconst DisplaySpan = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'editMode',\n})<{ editMode: boolean }>(() => ({\n  ...varDisplayRootStyle,\n  borderBottom: \"1px dotted var(--var-border-color)\",\n  lineHeight: 1,\n  fontStyle: \"italic\",\n  margin: \"0 2px\",\n  display: \"inline-flex\",\n  \"&>a>span\": { padding: \"0 2px\" },\n  variants: [\n    {\n      props: { editMode: true },\n      style: { display: 'none' },\n    },\n  ],\n}))\n\n/**\n * A component that render a field for the variable \n * with dynamic editor, display and extra button\n * \n * @param defaultValue The default value of the variable\n * @param currentValue The current value of the variable\n * @param updateValue The function to update the variable\n * @param Editor component that edit the value\n * @param Display component that display the value\n * @param extraButton extra button next to the edit icon\n * \n */\nexport default function VarField({\n  currentValue,\n  Editor,\n  updateValue,\n  Display,\n  extraButton,\n}: {\n  currentValue: unknown,\n  updateValue: (value: unknown) => void,\n  Editor: React.FC<{\n    setTmp: (value: unknown) => void,\n    tempValue: unknown,\n  }>,\n  Display: React.FC<{\n    value: unknown,\n  }>,\n  extraButton?: React.ReactNode,\n}) {\n  const [editMode, setEditMode] = useState(false)\n  const firstRenderRef = useRef(true)\n  const [tmpVar, setTmpVar] = useState(currentValue)\n  const tmpVarRef = useRef(tmpVar)\n  const updateValueRef = useRef(updateValue)\n  tmpVarRef.current = tmpVar\n  updateValueRef.current = updateValue\n\n  useEffect(() => {\n    if (firstRenderRef.current) {\n      firstRenderRef.current = false\n      return\n    }\n\n    if (!editMode) {\n      updateValueRef.current(tmpVarRef.current)\n    }\n    // only update when start editing or stop editing\n  }, [editMode])\n\n  return (\n    <>\n      <DisplaySpan editMode={editMode}>\n        <Box component=\"a\" onClick={() => setEditMode(true)}\n          sx={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: \"8px\",\n          }}>\n          <Display value={tmpVar} />\n          <Box component=\"span\"><EditIcon sx={{ \"&.MuiSvgIcon-root\": { fontSize: \"inherit\" } }} /></Box>\n          {extraButton}\n        </Box>\n      </DisplaySpan>\n\n      {editMode && <Box component=\"span\"\n        sx={{\n          display: \"inline-flex\",\n          padding: \"0 8px\",\n        }}>\n        <ClickAwayListener onClickAway={() => setEditMode(false)}>\n          <span>\n            <Editor setTmp={setTmpVar} tempValue={tmpVar} />\n          </span>\n        </ClickAwayListener>\n      </Box>}\n    </>\n  )\n}\n"],"mappings":"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","names":["import_react","import_PhotoSizeSelectLarge","import_Close","import_Person","import_DeleteForever","import_AccountTreeOutlined","TextField","import_jsx_runtime","import_react","import_material","import_jsx_runtime","DisplaySpan"]}

package/dist/variablesRenderer.mjs

@@ -0,0 +1,21 @@
+import {
+  Var,
+  VarField
+} from "./chunk-R5MKQN6D.mjs";
+import "./chunk-ZG3NQI77.mjs";
+import "./chunk-OGNGPI3M.mjs";
+import "./chunk-VYD3PDBB.mjs";
+import "./chunk-3DQINB57.mjs";
+import "./chunk-3VUAM2GY.mjs";
+import "./chunk-MDAUF7IL.mjs";
+import "./chunk-JIU5GVM7.mjs";
+import "./chunk-4Q54P737.mjs";
+import "./chunk-OP6LKXPA.mjs";
+import "./chunk-ZVFYOXDE.mjs";
+import "./chunk-S6EZVRZC.mjs";
+import "./chunk-FJ6ZGZIA.mjs";
+export {
+  Var,
+  VarField
+};
+//# sourceMappingURL=variablesRenderer.mjs.map

package/dist/variablesRenderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}