@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/Formula/CloseSuggestion.js

@@ -1 +1,64 @@
-import{makeStyles as o}from"@material-ui/core";import{Tooltip as s}from"../Tooltip/Tooltip.js";import"../Tooltip/ScrollableTooltip.js";import{CloseSmallIcon as c}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";import{jsx as i}from"react/jsx-runtime";var n=o((function(o){return{buttonWrapper:{display:"flex",alignItems:"center",color:o.palette.primary.text7,"&:hover":{color:o.palette.primary.text1,cursor:"pointer"},marginLeft:"-24px",zIndex:999}}}));function t(o){var t=o.onClose,r=n();return i("div",{className:r.buttonWrapper,onClick:t,children:i(s,{title:"Clear",placement:"bottom",children:i(c,{size:16,strokeWidth:3})})})}export{t as default};
+import { makeStyles } from '@material-ui/core';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/ScrollableTooltip.js';
+import { CloseSmallIcon } from '../../icons/iconParkIcons.js';
+import '../../icons/customIcons/icons/AddMessage.js';
+import '../../icons/customIcons/icons/Attention.js';
+import '../../icons/customIcons/icons/Collapse.js';
+import '../../icons/customIcons/icons/Dashboard.js';
+import '../../icons/customIcons/icons/Expand.js';
+import '../../icons/customIcons/icons/FolderClosed.js';
+import '../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../icons/customIcons/icons/FolderOpened.js';
+import '../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../icons/customIcons/icons/LessOrEqual.js';
+import '../../icons/customIcons/icons/Search.js';
+import '../../icons/customIcons/icons/Wellhub.js';
+import '../../icons/customIcons/icons/MultiRuler.js';
+import '../../icons/customIcons/icons/Checkbox.js';
+import '../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../icons/customIcons/icons/Radio.js';
+import '../../icons/customIcons/icons/RadioChecked.js';
+import '../../icons/customIcons/icons/SimulFrac.js';
+import '../../icons/customIcons/icons/ZipperFrac.js';
+import '../../icons/customIcons/icons/CautionFilled.js';
+import '../../icons/customIcons/icons/MoreApp.js';
+import '../../icons/customIcons/icons/Pad.js';
+import '../../icons/customIcons/icons/Gap.js';
+import { jsx } from 'react/jsx-runtime';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    buttonWrapper: {
+      display: 'flex',
+      alignItems: 'center',
+      color: theme.palette.primary.text7,
+      '&:hover': {
+        color: theme.palette.primary.text1,
+        cursor: 'pointer'
+      },
+      marginLeft: '-24px',
+      zIndex: 999
+    }
+  };
+});
+function CloseSuggestion(_ref) {
+  var onClose = _ref.onClose;
+  var classes = useStyles();
+  return /*#__PURE__*/jsx("div", {
+    className: classes.buttonWrapper,
+    onClick: onClose,
+    children: /*#__PURE__*/jsx(Tooltip, {
+      title: "Clear",
+      placement: "bottom",
+      children: /*#__PURE__*/jsx(CloseSmallIcon, {
+        size: 16,
+        strokeWidth: 3
+      })
+    })
+  });
+}
+
+export { CloseSuggestion as default };
+//# sourceMappingURL=CloseSuggestion.js.map

package/components/Formula/Formula.js

@@ -1 +1,285 @@
-import{jsxs as o,jsx as s}from"react/jsx-runtime";import{useState as i,useMemo as e,useRef as r,useCallback as n,useEffect as c}from"react";import t from"classnames";import{useTheme as a,Button as l}from"@material-ui/core";import{replaceStringToLabel as m}from"./utils.js";import{useFormulaFunction as u}from"./useFormulaFunction.js";import{useFormulaStyles as p}from"./useFormulaStyles.js";import d from"./RootXIcon.js";import f from"./FormulaTextEditor.js";import h from"./CloseSuggestion.js";import v from"./SuggestionsMenu.js";import{CloseSmallIcon as j,InfoIcon as I}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";import b from"../../effects/useOutsideClick.js";import{Tooltip as C}from"../Tooltip/Tooltip.js";import"../Tooltip/ScrollableTooltip.js";var g=[{value:"*",isShift:!0,label:"8"},{value:"/",label:"/"},{value:"(",isShift:!0,label:"9"},{value:")",isShift:!0,label:"0"},{value:"+",isShift:!0,label:"+"},{value:"-",label:"-"},{value:"^",isShift:!0,label:"6"}],F=function(o,s,i){return s?i?o.palette.error.main:o.palette.primary.main:o.palette.primary.text7},N=function(N){var y,k=N.suggestions,S=void 0===k?[]:k,x=N.initFormula,T=void 0===x?"":x,W=N.onSave,E=void 0===W?function(){}:W,H=i(!0),V=H[0],A=H[1],M=i(!1),O=M[0],R=M[1],q=i(!1),L=q[0],P=q[1],U=i(T),z=U[0],B=U[1],G=i(0),D=G[0],X=G[1],Z=i(0),w=Z[0],J=Z[1],K=m(z,S),Q=K.search("/f"),Y=-1!==Q,$=e((function(){return S.map((function(o){return o.key}))}),[S]),_=K.substring(Q+"/f".length,D),oo=r(),so=p({isValue:!Y&&!!z}),io=a(),eo=u(z,$),ro=eo.formulaFunction,no=eo.error;b(oo,(function(){P(!1)}));var co=function(o){var s,i=S.find((function(s){return s.key===o}));R(!0),P(!0),B((function(s){return s.replace("".concat("/f").concat(_),o?"[".concat(o,"]"):"")})),X(Q+((null===(s=null==i?void 0:i.label)||void 0===s?void 0:s.length)||0))},to=n((function(o,s){D!==s&&X(s),o!==z&&(B(o),A(!1))}),[z,D]);return c((function(){B(T)}),[T]),o("div",{className:so.formulaContainer,children:[o("div",{className:so.formulaHeaderWrapper,children:[o("div",{className:so.formulaHeaderTextWrapper,children:[s(d,{color:F(io,L,no)}),s("div",{className:so.formulaHeaderText,style:{color:F(io,L,no)},children:"Formula Expression"})]}),o("div",{className:so.formulaHeaderButtonWrapper,onClick:function(){Y||(A(!1),B(""),X(0),R(!0))},children:[s(j,{strokeWidth:3,size:16}),s("div",{className:so.formulaHeaderText,children:"Clear"})]})]}),o("div",{className:so.formulaEditorWrapper,children:[s("div",{ref:oo,onClick:function(){P(!0)},children:s(f,{initFormula:z,cursorPos:D,color:F(io,L,no),suggestions:S,isValueUpdated:O,setIsValueUpdated:R,onChange:to})}),Y&&s(h,{onClose:function(){return co("")}})]}),Y&&s(v,{suggestions:S,keyStr:_,onAddSuggestion:co,onChangeHeight:J}),o("div",{className:so.formulaFooterWrapper,style:{marginTop:Y?-w:0},children:[s(I,{className:so.formulaFooterIcon,strokeWidth:3,size:16}),s("div",{className:so.formulaFooterTextWrapper,children:o("div",{className:so.formulaFooterText,children:["Type ",s("span",{className:so.funcText,children:"/f"})," to do add live channels to your equation. Use your keybord for numbers and"," ",s(C,{title:s("div",{className:so.tooltipWrapper,children:g.map((function(i){return o("div",{className:so.tooltipLine,children:[s("span",{className:so.tooltipValue,children:i.value}),o("div",{className:so.tooltipLabelContainer,children:[!!i.isShift&&s("span",{className:so.tooltipSymbol,children:"⇧"}),s("span",{children:i.label})]},i.value)]},i.value)}))}),placement:"bottom",children:s("span",{className:so.successColor,children:"math symbols"})})]})})]}),s(l,{className:so.verifyButton,variant:"contained",color:"primary",onClick:function(){A(!0);var o=S.map((function(o){return o.key})).filter((function(o){return z&&z.includes(o)}));E({formula:z,variables:o,formulaFunc:ro})},disabled:V||!ro,children:"Verify"}),!!z&&s("span",{className:t(so.resultText,(y={},y[so.errorColor]=!!no,y[so.resultSuccessColor]=!no,y)),children:no?"The formula is not valid":"The formula is valid"})]})};export{N as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import { useTheme, Button } from '@material-ui/core';
+import { replaceStringToLabel } from './utils.js';
+import { useFormulaFunction } from './useFormulaFunction.js';
+import { useFormulaStyles } from './useFormulaStyles.js';
+import RootXIcon from './RootXIcon.js';
+import FormulaTextEditor from './FormulaTextEditor.js';
+import CloseSuggestion from './CloseSuggestion.js';
+import SuggestionsMenu from './SuggestionsMenu.js';
+import { CloseSmallIcon, InfoIcon } from '../../icons/iconParkIcons.js';
+import '../../icons/customIcons/icons/AddMessage.js';
+import '../../icons/customIcons/icons/Attention.js';
+import '../../icons/customIcons/icons/Collapse.js';
+import '../../icons/customIcons/icons/Dashboard.js';
+import '../../icons/customIcons/icons/Expand.js';
+import '../../icons/customIcons/icons/FolderClosed.js';
+import '../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../icons/customIcons/icons/FolderOpened.js';
+import '../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../icons/customIcons/icons/LessOrEqual.js';
+import '../../icons/customIcons/icons/Search.js';
+import '../../icons/customIcons/icons/Wellhub.js';
+import '../../icons/customIcons/icons/MultiRuler.js';
+import '../../icons/customIcons/icons/Checkbox.js';
+import '../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../icons/customIcons/icons/Radio.js';
+import '../../icons/customIcons/icons/RadioChecked.js';
+import '../../icons/customIcons/icons/SimulFrac.js';
+import '../../icons/customIcons/icons/ZipperFrac.js';
+import '../../icons/customIcons/icons/CautionFilled.js';
+import '../../icons/customIcons/icons/MoreApp.js';
+import '../../icons/customIcons/icons/Pad.js';
+import '../../icons/customIcons/icons/Gap.js';
+import useOutsideClick from '../../effects/useOutsideClick.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/ScrollableTooltip.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var HOT_STR = '/f';
+var mathSymbols = [{
+  value: '*',
+  isShift: true,
+  label: '8'
+}, {
+  value: '/',
+  label: '/'
+}, {
+  value: '(',
+  isShift: true,
+  label: '9'
+}, {
+  value: ')',
+  isShift: true,
+  label: '0'
+}, {
+  value: '+',
+  isShift: true,
+  label: '+'
+}, {
+  value: '-',
+  label: '-'
+}, {
+  value: '^',
+  isShift: true,
+  label: '6'
+}];
+var getColor = function getColor(theme, isHighlight, isError) {
+  if (!isHighlight) return theme.palette.primary.text7;
+  return isError ? theme.palette.error.main : theme.palette.primary.main;
+};
+var Formula = function Formula(_ref) {
+  var _classnames;
+  var _ref$suggestions = _ref.suggestions,
+    suggestions = _ref$suggestions === void 0 ? [] : _ref$suggestions,
+    _ref$initFormula = _ref.initFormula,
+    initFormula = _ref$initFormula === void 0 ? '' : _ref$initFormula,
+    _ref$onSave = _ref.onSave,
+    onSave = _ref$onSave === void 0 ? function () {} : _ref$onSave;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVerified = _useState2[0],
+    setIsVerified = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isValueUpdated = _useState4[0],
+    setIsValueUpdated = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isHighlight = _useState6[0],
+    setIsHighlight = _useState6[1];
+  var _useState7 = useState(initFormula),
+    _useState8 = _slicedToArray(_useState7, 2),
+    formulaValue = _useState8[0],
+    setFormulaValue = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    cursorPos = _useState10[0],
+    setCursorPos = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    suggestionsMenuHeight = _useState12[0],
+    setSuggestionsMenuHeight = _useState12[1];
+  var formulaLabel = replaceStringToLabel(formulaValue, suggestions);
+  var hotStrPos = formulaLabel.search(HOT_STR);
+  var isSuggestionState = hotStrPos !== -1;
+  var suggestionKeys = useMemo(function () {
+    return suggestions.map(function (item) {
+      return item.key;
+    });
+  }, [suggestions]);
+  var keyStr = formulaLabel.substring(hotStrPos + HOT_STR.length, cursorPos);
+  var formulaRef = useRef();
+  var classes = useFormulaStyles({
+    isValue: !isSuggestionState && !!formulaValue
+  });
+  var theme = useTheme();
+  var _useFormulaFunction = useFormulaFunction(formulaValue, suggestionKeys),
+    formulaFunction = _useFormulaFunction.formulaFunction,
+    error = _useFormulaFunction.error;
+  useOutsideClick(formulaRef, function () {
+    setIsHighlight(false);
+  });
+  var handleAddSuggestion = function handleAddSuggestion(value) {
+    var _suggestion$label;
+    var suggestion = suggestions.find(function (item) {
+      return item.key === value;
+    });
+    setIsValueUpdated(true);
+    setIsHighlight(true);
+    setFormulaValue(function (prev) {
+      return prev.replace("".concat(HOT_STR).concat(keyStr), value ? "[".concat(value, "]") : '');
+    });
+    setCursorPos(hotStrPos + ((suggestion === null || suggestion === void 0 ? void 0 : (_suggestion$label = suggestion.label) === null || _suggestion$label === void 0 ? void 0 : _suggestion$label.length) || 0));
+  };
+  var handleCloseSuggestionState = function handleCloseSuggestionState() {
+    return handleAddSuggestion('');
+  };
+  var handleChangeEditorValue = useCallback(function (newValue, newCursorPos) {
+    if (cursorPos !== newCursorPos) {
+      setCursorPos(newCursorPos);
+    }
+    if (newValue !== formulaValue) {
+      setFormulaValue(newValue);
+      setIsVerified(false);
+    }
+  }, [formulaValue, cursorPos]);
+  var handleClickValue = function handleClickValue() {
+    setIsHighlight(true);
+  };
+  var handleClear = function handleClear() {
+    if (isSuggestionState) return;
+    setIsVerified(false);
+    setFormulaValue('');
+    setCursorPos(0);
+    setIsValueUpdated(true);
+  };
+  var handleVerify = function handleVerify() {
+    setIsVerified(true);
+    var variables = suggestions.map(function (suggestion) {
+      return suggestion.key;
+    }).filter(function (item) {
+      return formulaValue && formulaValue.includes(item);
+    });
+    onSave({
+      formula: formulaValue,
+      variables: variables,
+      formulaFunc: formulaFunction
+    });
+  };
+  useEffect(function () {
+    setFormulaValue(initFormula);
+  }, [initFormula]);
+  return /*#__PURE__*/jsxs("div", {
+    className: classes.formulaContainer,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classes.formulaHeaderWrapper,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classes.formulaHeaderTextWrapper,
+        children: [/*#__PURE__*/jsx(RootXIcon, {
+          color: getColor(theme, isHighlight, error)
+        }), /*#__PURE__*/jsx("div", {
+          className: classes.formulaHeaderText,
+          style: {
+            color: getColor(theme, isHighlight, error)
+          },
+          children: "Formula Expression"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classes.formulaHeaderButtonWrapper,
+        onClick: handleClear,
+        children: [/*#__PURE__*/jsx(CloseSmallIcon, {
+          strokeWidth: 3,
+          size: 16
+        }), /*#__PURE__*/jsx("div", {
+          className: classes.formulaHeaderText,
+          children: "Clear"
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classes.formulaEditorWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        ref: formulaRef,
+        onClick: handleClickValue,
+        children: /*#__PURE__*/jsx(FormulaTextEditor, {
+          initFormula: formulaValue,
+          cursorPos: cursorPos,
+          color: getColor(theme, isHighlight, error),
+          suggestions: suggestions,
+          isValueUpdated: isValueUpdated,
+          setIsValueUpdated: setIsValueUpdated,
+          onChange: handleChangeEditorValue
+        })
+      }), isSuggestionState && /*#__PURE__*/jsx(CloseSuggestion, {
+        onClose: handleCloseSuggestionState
+      })]
+    }), isSuggestionState && /*#__PURE__*/jsx(SuggestionsMenu, {
+      suggestions: suggestions,
+      keyStr: keyStr,
+      onAddSuggestion: handleAddSuggestion,
+      onChangeHeight: setSuggestionsMenuHeight
+    }), /*#__PURE__*/jsxs("div", {
+      className: classes.formulaFooterWrapper,
+      style: {
+        marginTop: isSuggestionState ? -suggestionsMenuHeight : 0
+      },
+      children: [/*#__PURE__*/jsx(InfoIcon, {
+        className: classes.formulaFooterIcon,
+        strokeWidth: 3,
+        size: 16
+      }), /*#__PURE__*/jsx("div", {
+        className: classes.formulaFooterTextWrapper,
+        children: /*#__PURE__*/jsxs("div", {
+          className: classes.formulaFooterText,
+          children: ["Type ", /*#__PURE__*/jsx("span", {
+            className: classes.funcText,
+            children: "/f"
+          }), " to do add live channels to your equation. Use your keybord for numbers and", ' ', /*#__PURE__*/jsx(Tooltip, {
+            title: /*#__PURE__*/jsx("div", {
+              className: classes.tooltipWrapper,
+              children: mathSymbols.map(function (item) {
+                return /*#__PURE__*/jsxs("div", {
+                  className: classes.tooltipLine,
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: classes.tooltipValue,
+                    children: item.value
+                  }), /*#__PURE__*/jsxs("div", {
+                    className: classes.tooltipLabelContainer,
+                    children: [!!item.isShift && /*#__PURE__*/jsx("span", {
+                      className: classes.tooltipSymbol,
+                      children: "\u21E7"
+                    }), /*#__PURE__*/jsx("span", {
+                      children: item.label
+                    })]
+                  }, item.value)]
+                }, item.value);
+              })
+            }),
+            placement: "bottom",
+            children: /*#__PURE__*/jsx("span", {
+              className: classes.successColor,
+              children: "math symbols"
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/jsx(Button, {
+      className: classes.verifyButton,
+      variant: "contained",
+      color: "primary",
+      onClick: handleVerify,
+      disabled: isVerified || !formulaFunction,
+      children: "Verify"
+    }), !!formulaValue && /*#__PURE__*/jsx("span", {
+      className: classNames(classes.resultText, (_classnames = {}, _defineProperty(_classnames, classes.errorColor, !!error), _defineProperty(_classnames, classes.resultSuccessColor, !error), _classnames)),
+      children: error ? 'The formula is not valid' : 'The formula is valid'
+    })]
+  });
+};
+
+export { Formula as default };
+//# sourceMappingURL=Formula.js.map

package/components/Formula/Formula.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Formula.js","sources":["../../../src/components/Formula/Formula.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport classnames from 'classnames';\nimport { Button, Theme, useTheme } from '@material-ui/core';\n\nimport { replaceStringToLabel } from './utils';\nimport { useFormulaFunction } from './useFormulaFunction';\nimport { useFormulaStyles } from './useFormulaStyles';\nimport RootXIcon from './RootXIcon';\nimport FormulaTextEditor from './FormulaTextEditor';\nimport CloseSuggestion from './CloseSuggestion';\nimport SuggestionsMenu from './SuggestionsMenu';\n\nimport { CloseSmallIcon, InfoIcon } from '~/icons';\nimport useOutsideClick from '~/effects/useOutsideClick';\nimport Tooltip from '~/components/Tooltip';\n\nconst HOT_STR = '/f';\nconst mathSymbols = [\n  { value: '*', isShift: true, label: '8' },\n  { value: '/', label: '/' },\n  { value: '(', isShift: true, label: '9' },\n  { value: ')', isShift: true, label: '0' },\n  { value: '+', isShift: true, label: '+' },\n  { value: '-', label: '-' },\n  { value: '^', isShift: true, label: '6' },\n];\nconst getColor = (theme: Theme, isHighlight: boolean, isError: string) => {\n  if (!isHighlight) return theme.palette.primary.text7;\n  return isError ? theme.palette.error.main : theme.palette.primary.main;\n};\n\ntype FormulaObject = any;\n\ntype FormulaProps = {\n  suggestions?: { key: string; label: string; unit?: string; type: string }[];\n  initFormula?: string;\n  /**\n   * `FormulaObject` is an instance of [fparser](https://github.com/bylexus/fparse)\n   */\n  onSave?: (param: { formula: string; variables: string[]; formulaFunc: FormulaObject }) => void;\n};\n\nconst Formula = ({ suggestions = [], initFormula = '', onSave = () => {} }: FormulaProps) => {\n  const [isVerified, setIsVerified] = useState(true);\n  const [isValueUpdated, setIsValueUpdated] = useState(false);\n  const [isHighlight, setIsHighlight] = useState(false);\n  const [formulaValue, setFormulaValue] = useState(initFormula);\n  const [cursorPos, setCursorPos] = useState(0);\n  const [suggestionsMenuHeight, setSuggestionsMenuHeight] = useState(0);\n  const formulaLabel = replaceStringToLabel(formulaValue, suggestions);\n  const hotStrPos = formulaLabel.search(HOT_STR);\n  const isSuggestionState = hotStrPos !== -1;\n  const suggestionKeys = useMemo(() => suggestions.map(item => item.key), [suggestions]);\n  const keyStr = formulaLabel.substring(hotStrPos + HOT_STR.length, cursorPos);\n\n  const formulaRef = useRef();\n  const classes = useFormulaStyles({ isValue: !isSuggestionState && !!formulaValue });\n\n  const theme = useTheme();\n  const { formulaFunction, error } = useFormulaFunction(formulaValue, suggestionKeys);\n\n  useOutsideClick(formulaRef, () => {\n    setIsHighlight(false);\n  });\n\n  const handleAddSuggestion = (value: string) => {\n    const suggestion = suggestions.find(item => item.key === value);\n    setIsValueUpdated(true);\n    setIsHighlight(true);\n    setFormulaValue(prev => prev.replace(`${HOT_STR}${keyStr}`, value ? `[${value}]` : ''));\n    setCursorPos(hotStrPos + (suggestion?.label?.length || 0));\n  };\n\n  const handleCloseSuggestionState = () => handleAddSuggestion('');\n\n  const handleChangeEditorValue = useCallback(\n    (newValue: string, newCursorPos: number) => {\n      if (cursorPos !== newCursorPos) {\n        setCursorPos(newCursorPos);\n      }\n      if (newValue !== formulaValue) {\n        setFormulaValue(newValue);\n        setIsVerified(false);\n      }\n    },\n    [formulaValue, cursorPos]\n  );\n\n  const handleClickValue = () => {\n    setIsHighlight(true);\n  };\n\n  const handleClear = () => {\n    if (isSuggestionState) return;\n    setIsVerified(false);\n    setFormulaValue('');\n    setCursorPos(0);\n    setIsValueUpdated(true);\n  };\n\n  const handleVerify = () => {\n    setIsVerified(true);\n    const variables = suggestions\n      .map(suggestion => suggestion.key)\n      .filter(item => formulaValue && formulaValue.includes(item));\n    onSave({ formula: formulaValue, variables, formulaFunc: formulaFunction });\n  };\n\n  useEffect(() => {\n    setFormulaValue(initFormula);\n  }, [initFormula]);\n\n  return (\n    <div className={classes.formulaContainer}>\n      <div className={classes.formulaHeaderWrapper}>\n        <div className={classes.formulaHeaderTextWrapper}>\n          <RootXIcon color={getColor(theme, isHighlight, error)} />\n          <div\n            className={classes.formulaHeaderText}\n            style={{ color: getColor(theme, isHighlight, error) }}\n          >\n            Formula Expression\n          </div>\n        </div>\n        <div className={classes.formulaHeaderButtonWrapper} onClick={handleClear}>\n          <CloseSmallIcon strokeWidth={3} size={16} />\n          <div className={classes.formulaHeaderText}>Clear</div>\n        </div>\n      </div>\n      <div className={classes.formulaEditorWrapper}>\n        <div ref={formulaRef} onClick={handleClickValue}>\n          <FormulaTextEditor\n            initFormula={formulaValue}\n            cursorPos={cursorPos}\n            color={getColor(theme, isHighlight, error)}\n            suggestions={suggestions}\n            isValueUpdated={isValueUpdated}\n            setIsValueUpdated={setIsValueUpdated}\n            onChange={handleChangeEditorValue}\n          />\n        </div>\n        {isSuggestionState && <CloseSuggestion onClose={handleCloseSuggestionState} />}\n      </div>\n      {isSuggestionState && (\n        <SuggestionsMenu\n          suggestions={suggestions}\n          keyStr={keyStr}\n          onAddSuggestion={handleAddSuggestion}\n          onChangeHeight={setSuggestionsMenuHeight}\n        />\n      )}\n      <div\n        className={classes.formulaFooterWrapper}\n        style={{ marginTop: isSuggestionState ? -suggestionsMenuHeight : 0 }}\n      >\n        <InfoIcon className={classes.formulaFooterIcon} strokeWidth={3} size={16} />\n        <div className={classes.formulaFooterTextWrapper}>\n          <div className={classes.formulaFooterText}>\n            Type <span className={classes.funcText}>/f</span> to do add live channels to your\n            equation. Use your keybord for numbers and{' '}\n            <Tooltip\n              title={\n                <div className={classes.tooltipWrapper}>\n                  {mathSymbols.map(item => (\n                    <div key={item.value} className={classes.tooltipLine}>\n                      <span className={classes.tooltipValue}>{item.value}</span>\n                      <div key={item.value} className={classes.tooltipLabelContainer}>\n                        {!!item.isShift && <span className={classes.tooltipSymbol}>&#8679;</span>}\n                        <span>{item.label}</span>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              }\n              placement=\"bottom\"\n            >\n              <span className={classes.successColor}>math symbols</span>\n            </Tooltip>\n          </div>\n        </div>\n      </div>\n      <Button\n        className={classes.verifyButton}\n        variant=\"contained\"\n        color=\"primary\"\n        onClick={handleVerify}\n        disabled={isVerified || !formulaFunction}\n      >\n        Verify\n      </Button>\n      {!!formulaValue && (\n        <span\n          className={classnames(classes.resultText, {\n            [classes.errorColor]: !!error,\n            [classes.resultSuccessColor]: !error,\n          })}\n        >\n          {error ? 'The formula is not valid' : 'The formula is valid'}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Formula;\n"],"names":["HOT_STR","mathSymbols","value","isShift","label","getColor","theme","isHighlight","isError","palette","primary","text7","error","main","Formula","suggestions","initFormula","onSave","useState","isVerified","setIsVerified","isValueUpdated","setIsValueUpdated","setIsHighlight","formulaValue","setFormulaValue","cursorPos","setCursorPos","suggestionsMenuHeight","setSuggestionsMenuHeight","formulaLabel","replaceStringToLabel","hotStrPos","search","isSuggestionState","suggestionKeys","useMemo","map","item","key","keyStr","substring","length","formulaRef","useRef","classes","useFormulaStyles","isValue","useTheme","useFormulaFunction","formulaFunction","useOutsideClick","handleAddSuggestion","suggestion","find","prev","replace","handleCloseSuggestionState","handleChangeEditorValue","useCallback","newValue","newCursorPos","handleClickValue","handleClear","handleVerify","variables","filter","includes","formula","formulaFunc","useEffect","_jsxs","formulaContainer","formulaHeaderWrapper","formulaHeaderTextWrapper","_jsx","formulaHeaderText","color","formulaHeaderButtonWrapper","formulaEditorWrapper","formulaFooterWrapper","marginTop","formulaFooterIcon","formulaFooterTextWrapper","formulaFooterText","funcText","tooltipWrapper","tooltipLine","tooltipValue","tooltipLabelContainer","tooltipSymbol","successColor","verifyButton","classnames","resultText","errorColor","resultSuccessColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,IAAMA,OAAO,GAAG,IAAI,CAAA;AACpB,IAAMC,WAAW,GAAG,CAClB;AAAEC,EAAAA,KAAK,EAAE,GAAG;AAAEC,EAAAA,OAAO,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,EACzC;AAAEF,EAAAA,KAAK,EAAE,GAAG;AAAEE,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,EAC1B;AAAEF,EAAAA,KAAK,EAAE,GAAG;AAAEC,EAAAA,OAAO,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,EACzC;AAAEF,EAAAA,KAAK,EAAE,GAAG;AAAEC,EAAAA,OAAO,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,EACzC;AAAEF,EAAAA,KAAK,EAAE,GAAG;AAAEC,EAAAA,OAAO,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,EACzC;AAAEF,EAAAA,KAAK,EAAE,GAAG;AAAEE,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,EAC1B;AAAEF,EAAAA,KAAK,EAAE,GAAG;AAAEC,EAAAA,OAAO,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,GAAA;AAAI,CAAC,CAC1C,CAAA;AACD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAY,EAAEC,WAAoB,EAAEC,OAAe,EAAK;EACxE,IAAI,CAACD,WAAW,EAAE,OAAOD,KAAK,CAACG,OAAO,CAACC,OAAO,CAACC,KAAK,CAAA;AACpD,EAAA,OAAOH,OAAO,GAAGF,KAAK,CAACG,OAAO,CAACG,KAAK,CAACC,IAAI,GAAGP,KAAK,CAACG,OAAO,CAACC,OAAO,CAACG,IAAI,CAAA;AACxE,CAAC,CAAA;AAaD,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAgF,IAAA,EAAA;AAAA,EAAA,IAAA,WAAA,CAAA;AAAA,EAAA,IAAA,gBAAA,GAAA,IAAA,CAA1EC,WAAW;AAAXA,IAAAA,WAAW,iCAAG,EAAE,GAAA,gBAAA;AAAA,IAAA,gBAAA,GAAA,IAAA,CAAEC,WAAW;AAAXA,IAAAA,WAAW,iCAAG,EAAE,GAAA,gBAAA;AAAA,IAAA,WAAA,GAAA,IAAA,CAAEC,MAAM;IAANA,MAAM,GAAA,WAAA,KAAA,KAAA,CAAA,GAAG,YAAM,EAAE,GAAA,WAAA,CAAA;EACtE,IAAoCC,SAAAA,GAAAA,QAAQ,CAAC,IAAI,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,SAAA,EAAA,CAAA,CAAA;IAA3CC,UAAU,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,aAAa,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EAChC,IAA4CF,UAAAA,GAAAA,QAAQ,CAAC,KAAK,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAApDG,cAAc,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,iBAAiB,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EACxC,IAAsCJ,UAAAA,GAAAA,QAAQ,CAAC,KAAK,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAA9CX,WAAW,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEgB,cAAc,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EAClC,IAAwCL,UAAAA,GAAAA,QAAQ,CAACF,WAAW,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAAtDQ,YAAY,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,eAAe,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EACpC,IAAkCP,UAAAA,GAAAA,QAAQ,CAAC,CAAC,CAAC;AAAA,IAAA,WAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAAtCQ,SAAS,GAAA,WAAA,CAAA,CAAA,CAAA;IAAEC,YAAY,GAAA,WAAA,CAAA,CAAA,CAAA,CAAA;EAC9B,IAA0DT,WAAAA,GAAAA,QAAQ,CAAC,CAAC,CAAC;AAAA,IAAA,WAAA,GAAA,cAAA,CAAA,WAAA,EAAA,CAAA,CAAA;IAA9DU,qBAAqB,GAAA,WAAA,CAAA,CAAA,CAAA;IAAEC,wBAAwB,GAAA,WAAA,CAAA,CAAA,CAAA,CAAA;AACtD,EAAA,IAAMC,YAAY,GAAGC,oBAAoB,CAACP,YAAY,EAAET,WAAW,CAAC,CAAA;AACpE,EAAA,IAAMiB,SAAS,GAAGF,YAAY,CAACG,MAAM,CAACjC,OAAO,CAAC,CAAA;AAC9C,EAAA,IAAMkC,iBAAiB,GAAGF,SAAS,KAAK,CAAC,CAAC,CAAA;EAC1C,IAAMG,cAAc,GAAGC,OAAO,CAAC,YAAA;AAAA,IAAA,OAAMrB,WAAW,CAACsB,GAAG,CAAC,UAAAC,IAAI,EAAA;MAAA,OAAIA,IAAI,CAACC,GAAG,CAAA;KAAC,CAAA,CAAA;GAAE,EAAA,CAACxB,WAAW,CAAC,CAAC,CAAA;AACtF,EAAA,IAAMyB,MAAM,GAAGV,YAAY,CAACW,SAAS,CAACT,SAAS,GAAGhC,OAAO,CAAC0C,MAAM,EAAEhB,SAAS,CAAC,CAAA;EAE5E,IAAMiB,UAAU,GAAGC,MAAM,EAAE,CAAA;EAC3B,IAAMC,OAAO,GAAGC,gBAAgB,CAAC;AAAEC,IAAAA,OAAO,EAAE,CAACb,iBAAiB,IAAI,CAAC,CAACV,YAAAA;AAAa,GAAC,CAAC,CAAA;EAEnF,IAAMlB,KAAK,GAAG0C,QAAQ,EAAE,CAAA;AACxB,EAAA,IAAA,mBAAA,GAAmCC,kBAAkB,CAACzB,YAAY,EAAEW,cAAc,CAAC;AAA3Ee,IAAAA,eAAe,uBAAfA,eAAe;AAAEtC,IAAAA,KAAK,uBAALA,KAAK,CAAA;EAE9BuC,eAAe,CAACR,UAAU,EAAE,YAAM;IAChCpB,cAAc,CAAC,KAAK,CAAC,CAAA;AACvB,GAAC,CAAC,CAAA;AAEF,EAAA,IAAM6B,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIlD,KAAa,EAAK;AAAA,IAAA,IAAA,iBAAA,CAAA;AAC7C,IAAA,IAAMmD,UAAU,GAAGtC,WAAW,CAACuC,IAAI,CAAC,UAAAhB,IAAI,EAAA;AAAA,MAAA,OAAIA,IAAI,CAACC,GAAG,KAAKrC,KAAK,CAAA;KAAC,CAAA,CAAA;IAC/DoB,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACvBC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpBE,eAAe,CAAC,UAAA8B,IAAI,EAAA;AAAA,MAAA,OAAIA,IAAI,CAACC,OAAO,CAAA,EAAA,CAAA,MAAA,CAAIxD,OAAO,CAAA,CAAA,MAAA,CAAGwC,MAAM,CAAA,EAAItC,KAAK,GAAA,GAAA,CAAA,MAAA,CAAOA,KAAK,EAAA,GAAA,CAAA,GAAM,EAAE,CAAC,CAAA;KAAC,CAAA,CAAA;AACvFyB,IAAAA,YAAY,CAACK,SAAS,IAAI,CAAAqB,UAAU,aAAVA,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,iBAAA,GAAVA,UAAU,CAAEjD,KAAK,MAAjB,IAAA,IAAA,iBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAmBsC,MAAM,KAAI,CAAC,CAAC,CAAC,CAAA;GAC3D,CAAA;EAED,IAAMe,0BAA0B,GAAG,SAA7BA,0BAA0B,GAAA;IAAA,OAASL,mBAAmB,CAAC,EAAE,CAAC,CAAA;AAAA,GAAA,CAAA;EAEhE,IAAMM,uBAAuB,GAAGC,WAAW,CACzC,UAACC,QAAgB,EAAEC,YAAoB,EAAK;IAC1C,IAAInC,SAAS,KAAKmC,YAAY,EAAE;MAC9BlC,YAAY,CAACkC,YAAY,CAAC,CAAA;AAC5B,KAAA;IACA,IAAID,QAAQ,KAAKpC,YAAY,EAAE;MAC7BC,eAAe,CAACmC,QAAQ,CAAC,CAAA;MACzBxC,aAAa,CAAC,KAAK,CAAC,CAAA;AACtB,KAAA;AACF,GAAC,EACD,CAACI,YAAY,EAAEE,SAAS,CAAC,CAC1B,CAAA;AAED,EAAA,IAAMoC,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7BvC,cAAc,CAAC,IAAI,CAAC,CAAA;GACrB,CAAA;AAED,EAAA,IAAMwC,WAAW,GAAG,SAAdA,WAAW,GAAS;AACxB,IAAA,IAAI7B,iBAAiB,EAAE,OAAA;IACvBd,aAAa,CAAC,KAAK,CAAC,CAAA;IACpBK,eAAe,CAAC,EAAE,CAAC,CAAA;IACnBE,YAAY,CAAC,CAAC,CAAC,CAAA;IACfL,iBAAiB,CAAC,IAAI,CAAC,CAAA;GACxB,CAAA;AAED,EAAA,IAAM0C,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzB5C,aAAa,CAAC,IAAI,CAAC,CAAA;AACnB,IAAA,IAAM6C,SAAS,GAAGlD,WAAW,CAC1BsB,GAAG,CAAC,UAAAgB,UAAU,EAAA;MAAA,OAAIA,UAAU,CAACd,GAAG,CAAA;AAAA,KAAA,CAAC,CACjC2B,MAAM,CAAC,UAAA5B,IAAI,EAAA;AAAA,MAAA,OAAId,YAAY,IAAIA,YAAY,CAAC2C,QAAQ,CAAC7B,IAAI,CAAC,CAAA;KAAC,CAAA,CAAA;AAC9DrB,IAAAA,MAAM,CAAC;AAAEmD,MAAAA,OAAO,EAAE5C,YAAY;AAAEyC,MAAAA,SAAS,EAATA,SAAS;AAAEI,MAAAA,WAAW,EAAEnB,eAAAA;AAAgB,KAAC,CAAC,CAAA;GAC3E,CAAA;AAEDoB,EAAAA,SAAS,CAAC,YAAM;IACd7C,eAAe,CAACT,WAAW,CAAC,CAAA;AAC9B,GAAC,EAAE,CAACA,WAAW,CAAC,CAAC,CAAA;EAEjB,oBACEuD,IAAA,CAAA,KAAA,EAAA;IAAK,SAAS,EAAE1B,OAAO,CAAC2B,gBAAiB;IAAA,QACvC,EAAA,cAAAD,IAAA,CAAA,KAAA,EAAA;MAAK,SAAS,EAAE1B,OAAO,CAAC4B,oBAAqB;MAAA,QAC3C,EAAA,cAAAF,IAAA,CAAA,KAAA,EAAA;QAAK,SAAS,EAAE1B,OAAO,CAAC6B,wBAAyB;AAAA,QAAA,QAAA,EAAA,cAC/CC,IAAC,SAAS,EAAA;AAAC,UAAA,KAAK,EAAEtE,QAAQ,CAACC,KAAK,EAAEC,WAAW,EAAEK,KAAK,CAAA;AAAE,SAAA,CAAG,eACzD+D,GAAA,CAAA,KAAA,EAAA;UACE,SAAS,EAAE9B,OAAO,CAAC+B,iBAAkB;AACrC,UAAA,KAAK,EAAE;AAAEC,YAAAA,KAAK,EAAExE,QAAQ,CAACC,KAAK,EAAEC,WAAW,EAAEK,KAAK,CAAA;WAAI;AAAA,UAAA,QAAA,EAAA,oBAAA;SAGlD,CAAA,CAAA;AAAA,OAAA,CACF,eACN2D,IAAA,CAAA,KAAA,EAAA;QAAK,SAAS,EAAE1B,OAAO,CAACiC,0BAA2B;AAAC,QAAA,OAAO,EAAEf,WAAY;AAAA,QAAA,QAAA,EAAA,cACvEY,IAAC,cAAc,EAAA;AAAC,UAAA,WAAW,EAAE,CAAE;AAAC,UAAA,IAAI,EAAE,EAAA;AAAG,SAAA,CAAG,eAC5CA,GAAA,CAAA,KAAA,EAAA;UAAK,SAAS,EAAE9B,OAAO,CAAC+B,iBAAkB;AAAA,UAAA,QAAA,EAAA,OAAA;SAAY,CAAA,CAAA;OAClD,CAAA,CAAA;AAAA,KAAA,CACF,eACNL,IAAA,CAAA,KAAA,EAAA;MAAK,SAAS,EAAE1B,OAAO,CAACkC,oBAAqB;MAAA,QAC3C,EAAA,cAAAJ,GAAA,CAAA,KAAA,EAAA;AAAK,QAAA,GAAG,EAAEhC,UAAW;AAAC,QAAA,OAAO,EAAEmB,gBAAiB;AAAA,QAAA,QAAA,eAC9Ca,IAAC,iBAAiB,EAAA;AAChB,UAAA,WAAW,EAAEnD,YAAa;AAC1B,UAAA,SAAS,EAAEE,SAAU;UACrB,KAAK,EAAErB,QAAQ,CAACC,KAAK,EAAEC,WAAW,EAAEK,KAAK,CAAE;AAC3C,UAAA,WAAW,EAAEG,WAAY;AACzB,UAAA,cAAc,EAAEM,cAAe;AAC/B,UAAA,iBAAiB,EAAEC,iBAAkB;AACrC,UAAA,QAAQ,EAAEoC,uBAAAA;AAAwB,SAAA,CAAA;AAClC,OAAA,CACE,EACLxB,iBAAiB,iBAAIyC,GAAA,CAAC,eAAe,EAAA;AAAC,QAAA,OAAO,EAAElB,0BAAAA;OAA8B,CAAA,CAAA;AAAA,KAAA,CAC1E,EACLvB,iBAAiB,iBAChByC,GAAA,CAAC,eAAe,EAAA;AACd,MAAA,WAAW,EAAE5D,WAAY;AACzB,MAAA,MAAM,EAAEyB,MAAO;AACf,MAAA,eAAe,EAAEY,mBAAoB;AACrC,MAAA,cAAc,EAAEvB,wBAAAA;AAAyB,KAAA,CAE5C,eACD0C,IAAA,CAAA,KAAA,EAAA;MACE,SAAS,EAAE1B,OAAO,CAACmC,oBAAqB;AACxC,MAAA,KAAK,EAAE;AAAEC,QAAAA,SAAS,EAAE/C,iBAAiB,GAAG,CAACN,qBAAqB,GAAG,CAAA;OAAI;AAAA,MAAA,QAAA,EAAA,cAErE+C,IAAC,QAAQ,EAAA;QAAC,SAAS,EAAE9B,OAAO,CAACqC,iBAAkB;AAAC,QAAA,WAAW,EAAE,CAAE;AAAC,QAAA,IAAI,EAAE,EAAA;AAAG,OAAA,CAAG,eAC5EP,GAAA,CAAA,KAAA,EAAA;QAAK,SAAS,EAAE9B,OAAO,CAACsC,wBAAyB;QAAA,QAC/C,eAAAZ,IAAA,CAAA,KAAA,EAAA;UAAK,SAAS,EAAE1B,OAAO,CAACuC,iBAAkB;UAAA,QACnC,EAAA,CAAA,OAAA,eAAAT,GAAA,CAAA,MAAA,EAAA;YAAM,SAAS,EAAE9B,OAAO,CAACwC,QAAS;AAAA,YAAA,QAAA,EAAA,IAAA;AAAA,WAAA,CAAU,EACN,6EAAA,EAAA,GAAG,eAC9CV,GAAA,CAAC,OAAO,EAAA;AACN,YAAA,KAAK,eACHA,GAAA,CAAA,KAAA,EAAA;cAAK,SAAS,EAAE9B,OAAO,CAACyC,cAAe;AAAA,cAAA,QAAA,EACpCrF,WAAW,CAACoC,GAAG,CAAC,UAAAC,IAAI,EAAA;gBAAA,oBACnBiC,IAAA,CAAA,KAAA,EAAA;kBAAsB,SAAS,EAAE1B,OAAO,CAAC0C,WAAY;kBAAA,QACnD,EAAA,cAAAZ,GAAA,CAAA,MAAA,EAAA;oBAAM,SAAS,EAAE9B,OAAO,CAAC2C,YAAa;AAAA,oBAAA,QAAA,EAAElD,IAAI,CAACpC,KAAAA;AAAK,mBAAA,CAAQ,eAC1DqE,IAAA,CAAA,KAAA,EAAA;oBAAsB,SAAS,EAAE1B,OAAO,CAAC4C,qBAAsB;AAAA,oBAAA,QAAA,EAAA,CAC5D,CAAC,CAACnD,IAAI,CAACnC,OAAO,iBAAIwE,GAAA,CAAA,MAAA,EAAA;sBAAM,SAAS,EAAE9B,OAAO,CAAC6C,aAAc;AAAA,sBAAA,QAAA,EAAA,QAAA;AAAA,qBAAA,CAAe,eACzEf,GAAA,CAAA,MAAA,EAAA;AAAA,sBAAA,QAAA,EAAOrC,IAAI,CAAClC,KAAAA;qBAAa,CAAA,CAAA;mBAFjBkC,EAAAA,IAAI,CAACpC,KAAK,CAGd,CAAA;iBALEoC,EAAAA,IAAI,CAACpC,KAAK,CAMd,CAAA;eACP,CAAA;aAEJ,CAAA;AACD,YAAA,SAAS,EAAC,QAAQ;YAAA,QAElB,eAAAyE,GAAA,CAAA,MAAA,EAAA;cAAM,SAAS,EAAE9B,OAAO,CAAC8C,YAAa;AAAA,cAAA,QAAA,EAAA,cAAA;AAAA,aAAA,CAAA;WAC9B,CAAA,CAAA;AAAA,SAAA,CAAA;OAER,CAAA,CAAA;KACF,CAAA,eACNhB,IAAC,MAAM,EAAA;MACL,SAAS,EAAE9B,OAAO,CAAC+C,YAAa;AAChC,MAAA,OAAO,EAAC,WAAW;AACnB,MAAA,KAAK,EAAC,SAAS;AACf,MAAA,OAAO,EAAE5B,YAAa;AACtB,MAAA,QAAQ,EAAE7C,UAAU,IAAI,CAAC+B,eAAgB;AAAA,MAAA,QAAA,EAAA,QAAA;AAAA,KAAA,CAGlC,EACR,CAAC,CAAC1B,YAAY,iBACbmD,GAAA,CAAA,MAAA,EAAA;MACE,SAAS,EAAEkB,UAAU,CAAChD,OAAO,CAACiD,UAAU,GAAA,WAAA,GAAA,EAAA,EAAA,eAAA,CAAA,WAAA,EACrCjD,OAAO,CAACkD,UAAU,EAAG,CAAC,CAACnF,KAAK,CAC5BiC,EAAAA,eAAAA,CAAAA,WAAAA,EAAAA,OAAO,CAACmD,kBAAkB,EAAG,CAACpF,KAAK,CACnC,EAAA,WAAA,EAAA;MAAA,QAEFA,EAAAA,KAAK,GAAG,0BAA0B,GAAG,sBAAA;KAEzC,CAAA,CAAA;GACG,CAAA,CAAA;AAEV;;;;"}

package/components/Formula/FormulaTextEditor.js

@@ -1 +1,97 @@
-import r from"@babel/runtime/helpers/slicedToArray";import{useMemo as e,useState as t,useRef as n,useEffect as o}from"react";import{makeStyles as a}from"@material-ui/core";import{convertStringToEditorValue as i,getUpdatedHtmlValue as u,setCaret as p,getCaret as c,convertEditorValueToString as s}from"./utils.js";import{jsx as l}from"react/jsx-runtime";var m=a((function(){return{customTextarea:{display:"flex",flexWrap:"wrap",alignItems:"center",width:"442px",maxWidth:"442px",minHeight:"90px",overflowWrap:"anywhere",whiteSpace:"normal",margin:"-8px 0",padding:function(r){return r.isEmptyValue?"31px 24px 24px 16px":"16px 24px 16px 16px"},fontSize:"16px",lineHeight:"24px",borderRadius:"8px",outline:"0px",border:function(r){var e=r.color;return"1px solid ".concat(e)}}}})),x=function(a){var x=a.initFormula,f=a.cursorPos,d=a.color,g=a.suggestions,h=a.isValueUpdated,y=a.setIsValueUpdated,v=a.onChange,T=e((function(){return i(x,g)}),[x,g]),b=t(T),w=r(b,2),H=w[0],I=w[1],V=e((function(){return u(H)}),[H]),E=r(V,2),L=E[0],M=E[1],S=n(),W=n(!1),j=m({color:d,isEmptyValue:M});return o((function(){h&&(W.current=!0,I(T),y(!1))}),[T,h]),o((function(){p(S.current,f),W.current&&S.current.focus()}),[L]),l("span",{ref:S,contentEditable:!0,onInput:function(r){var e=c(S.current);I(r.target.innerHTML),v(s(r.target.innerHTML,g),e)},onKeyPress:function(r){13===r.charCode&&r.preventDefault()},className:j.customTextarea,dangerouslySetInnerHTML:{__html:L}})};export{x as default,m as useStyles};
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core';
+import { convertStringToEditorValue, getUpdatedHtmlValue, setCaret, getCaret, convertEditorValueToString } from './utils.js';
+import { jsx } from 'react/jsx-runtime';
+
+var useStyles = makeStyles(function () {
+  return {
+    customTextarea: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      width: '442px',
+      maxWidth: '442px',
+      minHeight: '90px',
+      overflowWrap: 'anywhere',
+      whiteSpace: 'normal',
+      margin: '-8px 0',
+      padding: function padding(_ref) {
+        var isEmptyValue = _ref.isEmptyValue;
+        return isEmptyValue ? '31px 24px 24px 16px' : '16px 24px 16px 16px';
+      },
+      fontSize: '16px',
+      lineHeight: '24px',
+      borderRadius: '8px',
+      outline: '0px',
+      border: function border(_ref2) {
+        var color = _ref2.color;
+        return "1px solid ".concat(color);
+      }
+    }
+  };
+});
+var enterKeyCode = 13;
+var FormulaTextEditor = function FormulaTextEditor(_ref3) {
+  var initFormula = _ref3.initFormula,
+    cursorPos = _ref3.cursorPos,
+    color = _ref3.color,
+    suggestions = _ref3.suggestions,
+    isValueUpdated = _ref3.isValueUpdated,
+    setIsValueUpdated = _ref3.setIsValueUpdated,
+    onChange = _ref3.onChange;
+  var initialValue = useMemo(function () {
+    return convertStringToEditorValue(initFormula, suggestions);
+  }, [initFormula, suggestions]);
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    htmlValue = _useState2[0],
+    setHtmlValue = _useState2[1];
+  var _useMemo = useMemo(function () {
+      return getUpdatedHtmlValue(htmlValue);
+    }, [htmlValue]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    updatedHtmlValue = _useMemo2[0],
+    isEmptyValue = _useMemo2[1];
+  var contentRef = useRef();
+  var initialRef = useRef(false);
+  var classes = useStyles({
+    color: color,
+    isEmptyValue: isEmptyValue
+  });
+  var handleKeyPress = function handleKeyPress(event) {
+    // prevent Enter key
+    if (event.charCode === enterKeyCode) {
+      event.preventDefault();
+    }
+  };
+  var handleChange = function handleChange(event) {
+    var caretPos = getCaret(contentRef.current);
+    setHtmlValue(event.target.innerHTML);
+    onChange(convertEditorValueToString(event.target.innerHTML, suggestions), caretPos);
+  };
+  useEffect(function () {
+    if (isValueUpdated) {
+      initialRef.current = true;
+      setHtmlValue(initialValue);
+      setIsValueUpdated(false);
+    }
+  }, [initialValue, isValueUpdated]);
+  useEffect(function () {
+    setCaret(contentRef.current, cursorPos);
+    if (initialRef.current) contentRef.current.focus();
+  }, [updatedHtmlValue]);
+  return /*#__PURE__*/jsx("span", {
+    ref: contentRef,
+    contentEditable: true,
+    onInput: handleChange,
+    onKeyPress: handleKeyPress,
+    className: classes.customTextarea,
+    dangerouslySetInnerHTML: {
+      __html: updatedHtmlValue
+    }
+  });
+};
+
+export { FormulaTextEditor as default, useStyles };
+//# sourceMappingURL=FormulaTextEditor.js.map

package/components/Formula/RootXIcon.js

@@ -1 +1,41 @@
-import r from"prop-types";import{jsxs as o,jsx as t}from"react/jsx-runtime";var e=function(r){var e=r.color;return o("svg",{width:"12",height:"10",viewBox:"0 0 12 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("path",{d:"M11.25 1.25H6L3.75 9.5L2.25 5.75H0.75",stroke:e,strokeMiterlimit:"10",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M6.75 5.375L10.5 9.5",stroke:e,strokeMiterlimit:"10",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M10.5 5.375L6.75 9.5",stroke:e,strokeMiterlimit:"10",strokeLinecap:"round",strokeLinejoin:"round"})]})};e.propTypes={color:r.string},e.defaultProps={color:"#03BCD4"};export{e as default};
+import PropTypes from 'prop-types';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RootXIcon = function RootXIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/jsxs("svg", {
+    width: "12",
+    height: "10",
+    viewBox: "0 0 12 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M11.25 1.25H6L3.75 9.5L2.25 5.75H0.75",
+      stroke: color,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M6.75 5.375L10.5 9.5",
+      stroke: color,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M10.5 5.375L6.75 9.5",
+      stroke: color,
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+RootXIcon.propTypes = {
+  color: PropTypes.string
+};
+RootXIcon.defaultProps = {
+  color: '#03BCD4'
+};
+
+export { RootXIcon as default };
+//# sourceMappingURL=RootXIcon.js.map