@onesy/ui-react 1.0.164 → 1.0.167

package/SmartTextField/SmartTextField.js

@@ -155,81 +155,27 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-SmartTextField'
 });
 const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _refs$root$current;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10, _theme$elements11, _theme$elements12, _theme$elements13, _theme$elements14, _theme$elements15, _refs$root$current;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySmartTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const TextField = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.TextField) || _TextField.default;
-  }, [theme]);
-  const List = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.List) || _List.default;
-  }, [theme]);
-  const ListItem = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.ListItem) || _ListItem.default;
-  }, [theme]);
-  const Avatar = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Avatar) || _Avatar.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.default;
-  }, [theme]);
-  const Button = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Button) || _Button.default;
-  }, [theme]);
-  const Append = _react.default.useMemo(() => {
-    var _theme$elements9;
-    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Append) || _Append.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Fade) || _Fade.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements1;
-    return (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const ToggleButton = _react.default.useMemo(() => {
-    var _theme$elements10;
-    return (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ToggleButton) || _ToggleButton.default;
-  }, [theme]);
-  const ClickListener = _react.default.useMemo(() => {
-    var _theme$elements11;
-    return (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.ClickListener) || _ClickListener.default;
-  }, [theme]);
-  const ToggleButtons = _react.default.useMemo(() => {
-    var _theme$elements12;
-    return (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.ToggleButtons) || _ToggleButtons.default;
-  }, [theme]);
-  const Menu = _react.default.useMemo(() => {
-    var _theme$elements13;
-    return (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.Menu) || _Menu.default;
-  }, [theme]);
-  const Divider = _react.default.useMemo(() => {
-    var _theme$elements14;
-    return (theme === null || theme === void 0 || (_theme$elements14 = theme.elements) === null || _theme$elements14 === void 0 ? void 0 : _theme$elements14.Divider) || _Divider.default;
-  }, [theme]);
-  const ColorTextField = _react.default.useMemo(() => {
-    var _theme$elements15;
-    return (theme === null || theme === void 0 || (_theme$elements15 = theme.elements) === null || _theme$elements15 === void 0 ? void 0 : _theme$elements15.ColorTextField) || _ColorTextField.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySmartTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const TextField = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.TextField) || _TextField.default;
+  const List = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.List) || _List.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.ListItem) || _ListItem.default;
+  const Avatar = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Avatar) || _Avatar.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Button) || _Button.default;
+  const Append = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Append) || _Append.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Fade) || _Fade.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Tooltip) || _Tooltip.default;
+  const ToggleButton = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ToggleButton) || _ToggleButton.default;
+  const ClickListener = (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.ClickListener) || _ClickListener.default;
+  const ToggleButtons = (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.ToggleButtons) || _ToggleButtons.default;
+  const Menu = (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.Menu) || _Menu.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements14 = theme.elements) === null || _theme$elements14 === void 0 ? void 0 : _theme$elements14.Divider) || _Divider.default;
+  const ColorTextField = (theme === null || theme === void 0 || (_theme$elements15 = theme.elements) === null || _theme$elements15 === void 0 ? void 0 : _theme$elements15.ColorTextField) || _ColorTextField.default;
   const {
       tonal = true,
       color = 'default',
@@ -343,14 +289,14 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const rootWindow = rootDocument && (rootDocument.defaultView || window);
   refs.rootDocument.current = rootDocument;
   refs.rootWindow.current = rootWindow;
-  const init = _react.default.useCallback(() => {
+  const init = () => {
     if (version === 'text') {
       const valueNew = valueDefault || value || '';
       if (refs.root.current) {
         refs.root.current.innerHTML = valueNew;
       }
     }
-  }, [version, value, valueDefault]);
+  };
   _react.default.useEffect(() => {
     // init
     init();
@@ -360,8 +306,8 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, [(0, _utils.hash)(optionsMention_)]);
   _react.default.useEffect(() => {
     const valuePrevious = (refs.root.current.innerHTML || '').replaceAll(' ', ' ');
-    const valueNew = (0, _utils.textToInnerHTML)(value_);
-    if (value_ !== undefined && valuePrevious !== valueNew) validate(!value_ ? '' : (0, _utils2.sanitize)(value_));
+    const valueNew_0 = (0, _utils.textToInnerHTML)(value_);
+    if (value_ !== undefined && valuePrevious !== valueNew_0) validate(!value_ ? '' : (0, _utils2.sanitize)(value_));
   }, [value_]);
 
   // Save selection to revive, use it on execComand
@@ -375,12 +321,12 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       [property]: itemValue
     }));
   };
-  const updateOpen = (property, itemValue) => {
-    setOpen(values => _objectSpread(_objectSpread({}, values), {}, {
-      [property]: itemValue
+  const updateOpen = (property_0, itemValue_0) => {
+    setOpen(values_0 => _objectSpread(_objectSpread({}, values_0), {}, {
+      [property_0]: itemValue_0
     }));
   };
-  const validateElement = _react.default.useCallback(element => {
+  const validateElement = element => {
     if (element !== null && element !== void 0 && element.children) {
       Array.from(element === null || element === void 0 ? void 0 : element.children).forEach(child => {
         // Any tag
@@ -394,13 +340,13 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         if (child !== null && child !== void 0 && child.children) validateElement(child);
       });
     }
-  }, []);
-  const validate = _react.default.useCallback((valueNew = undefined) => {
+  };
+  const validate = (valueNew_1 = undefined) => {
     // Save caret position
     refs.caret.current = _utils2.caret.save(refs.root.current);
 
     // Update the root innerHTML
-    if (valueNew !== undefined) refs.root.current.innerHTML = valueNew;
+    if (valueNew_1 !== undefined) refs.root.current.innerHTML = valueNew_1;
     refs.validateMeta.current.restore = false;
 
     // Find all span onesy-mention children
@@ -408,8 +354,8 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     validateElement(refs.root.current);
     if (refs.validateMeta.current.restore) _utils2.caret.restore(refs.root.current, refs.caret.current);
     return refs.root.current.innerHTML;
-  }, []);
-  const getAtSearchData = _react.default.useCallback(() => {
+  };
+  const getAtSearchData = () => {
     if (refs.root.current) {
       var _anchorNode, _range$commonAncestor, _anchorNode2;
       const windowSelection = window.document.getSelection();
@@ -436,9 +382,9 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (result && result.match(/\s{2}/g)) return '';
       return result;
     }
-  }, []);
+  };
   refs.search.current = getAtSearchData();
-  const onInput = _react.default.useCallback(event => {
+  const onInput = event => {
     if (refs.root.current) {
       let valueInput = refs.root.current.innerHTML || '';
       if (refs.root.current.textContent === '') {
@@ -454,7 +400,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       setValue(valueInput);
       if ((0, _utils.is)('function', refs.onChange.current)) refs.onChange.current(valueInput, event);
     }
-  }, []);
+  };
   _react.default.useEffect(() => {
     if (mention && refs.search.current !== undefined) onChangeMention === null || onChangeMention === void 0 || onChangeMention(refs.search.current, '@');
   }, [mention, refs.search.current]);
@@ -468,13 +414,13 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       window.document.removeEventListener('selectionchange', method);
     };
   }, []);
-  const updateSelection = _react.default.useCallback(() => {
-    const windowSelection = window.document.getSelection();
-    if (!(windowSelection && windowSelection.rangeCount > 0)) return;
-    const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
-    if (range) setSelectionMenu(range === null || range === void 0 ? void 0 : range.getBoundingClientRect());
-  }, []);
-  const onOpenSearch = _react.default.useCallback(async () => {
+  const updateSelection = () => {
+    const windowSelection_0 = window.document.getSelection();
+    if (!(windowSelection_0 && windowSelection_0.rangeCount > 0)) return;
+    const range_0 = windowSelection_0 === null || windowSelection_0 === void 0 ? void 0 : windowSelection_0.getRangeAt(0);
+    if (range_0) setSelectionMenu(range_0 === null || range_0 === void 0 ? void 0 : range_0.getBoundingClientRect());
+  };
+  const onOpenSearch = async () => {
     if (!refs.openMenu.current && !!refs.optionsMention.current.length) {
       // open
       setOpenMenu(true);
@@ -482,26 +428,26 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       // selection
       updateSelection();
     }
-  }, []);
-  const onCloseSearch = _react.default.useCallback(() => {
+  };
+  const onCloseSearch = () => {
     if (refs.openMenu.current) {
       setOpenMenu(false);
       setSelectionMenu(null);
     }
-  }, []);
-  const updateOffset = _react.default.useCallback(() => {
+  };
+  const updateOffset = () => {
     var _refs$searchElement$c;
     setOffset([-(((_refs$searchElement$c = refs.searchElement.current) === null || _refs$searchElement$c === void 0 ? void 0 : _refs$searchElement$c.clientWidth) || 0), 8]);
-  }, []);
-  const onFocus = _react.default.useCallback(() => {
+  };
+  const onFocus = () => {
     // setFocus(true);
-  }, []);
-  const onBlur = _react.default.useCallback(() => {
+  };
+  const onBlur = () => {
     // setFocus(false);
-  }, []);
-  const onKeyDown = _react.default.useCallback(event => {
-    const windowSelection = window.getSelection();
-    if (windowSelection) {
+  };
+  const onKeyDown = event_0 => {
+    const windowSelection_1 = window.getSelection();
+    if (windowSelection_1) {
       // if (event.key === 'Enter') {
       //   event.preventDefault();
 
@@ -522,48 +468,48 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       //   windowSelection.addRange(range);
       // }
 
-      if (event.key === 'ArrowRight') {
+      if (event_0.key === 'ArrowRight') {
         var _caretElement$dataset;
         // If in user mention span
         // move out of it with adding new empty space root node after the user mention span
         // only if caret is at the end of the span, & span is last child of it's parent
-        if (!(windowSelection && windowSelection.rangeCount > 0)) return;
-        const range = windowSelection.getRangeAt(0);
-        const caretElement = windowSelection.anchorNode.parentElement;
+        if (!(windowSelection_1 && windowSelection_1.rangeCount > 0)) return;
+        const range_1 = windowSelection_1.getRangeAt(0);
+        const caretElement = windowSelection_1.anchorNode.parentElement;
         const caretElementParent = caretElement.parentElement;
         const caretElementParentChildNodes = Array.from(caretElementParent.childNodes);
-        if ((caretElement === null || caretElement === void 0 || (_caretElement$dataset = caretElement.dataset) === null || _caretElement$dataset === void 0 ? void 0 : _caretElement$dataset.onesyVersion) === 'mention-user' && range.endOffset === windowSelection.anchorNode.textContent.length && caretElementParentChildNodes[caretElementParentChildNodes.length - 1] === caretElement) {
+        if ((caretElement === null || caretElement === void 0 || (_caretElement$dataset = caretElement.dataset) === null || _caretElement$dataset === void 0 ? void 0 : _caretElement$dataset.onesyVersion) === 'mention-user' && range_1.endOffset === windowSelection_1.anchorNode.textContent.length && caretElementParentChildNodes[caretElementParentChildNodes.length - 1] === caretElement) {
           caretElementParent.insertBefore(window.document.createTextNode('\u00A0'), caretElement.nextElementSibling);
         }
       }
     }
     if (!refs.multiline.current) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
+      if (event_0.key === 'Enter') {
+        event_0.preventDefault();
       }
     }
-    if (!refs.edit.current && (event.metaKey && _utils2.keyboardStyleCommands.includes(event.key) || event.ctrlKey && _utils2.keyboardStyleCommands.includes(event.key))) {
-      event.preventDefault();
+    if (!refs.edit.current && (event_0.metaKey && _utils2.keyboardStyleCommands.includes(event_0.key) || event_0.ctrlKey && _utils2.keyboardStyleCommands.includes(event_0.key))) {
+      event_0.preventDefault();
     }
-    if ((0, _utils.is)('function', onKeyDown_)) onKeyDown_(event);
-  }, [onKeyDown_]);
-  const onPaste = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onKeyDown_)) onKeyDown_(event_0);
+  };
+  const onPaste = event_1 => {
     // event.preventDefault();
 
     // const text = event.clipboardData?.getData('text/plain');
 
     // window.document.execCommand('insertText', false, text);
-  }, []);
-  const onPasteText = _react.default.useCallback(event => {
-    var _event$clipboardData;
-    event.preventDefault();
-    const text = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text/plain');
-    window.document.execCommand('insertText', false, text);
-  }, []);
-  const onDrop = _react.default.useCallback(event => {
-    event.preventDefault();
-  }, []);
-  const addTag = _react.default.useCallback((item, versionMention = 'user') => {
+  };
+  const onPasteText = event_2 => {
+    var _event_2$clipboardDat;
+    event_2.preventDefault();
+    const text_0 = (_event_2$clipboardDat = event_2.clipboardData) === null || _event_2$clipboardDat === void 0 ? void 0 : _event_2$clipboardDat.getData('text/plain');
+    window.document.execCommand('insertText', false, text_0);
+  };
+  const onDrop = event_3 => {
+    event_3.preventDefault();
+  };
+  const addTag = (item, versionMention = 'user') => {
     // Save caret position
     refs.caret.current = _utils2.caret.save(refs.root.current);
     const itemName = item.name;
@@ -571,11 +517,11 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
     // Query text node that equals selection anchorNode
     // and replace its textContent's search value with new span
-    const windowSelection = window.document.getSelection();
-    if (!(windowSelection && windowSelection.rangeCount > 0)) return;
-    const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
-    if (!range) return;
-    const textNode = windowSelection.anchorNode;
+    const windowSelection_2 = window.document.getSelection();
+    if (!(windowSelection_2 && windowSelection_2.rangeCount > 0)) return;
+    const range_2 = windowSelection_2 === null || windowSelection_2 === void 0 ? void 0 : windowSelection_2.getRangeAt(0);
+    if (!range_2) return;
+    const textNode = windowSelection_2.anchorNode;
     const textContent = textNode.textContent;
 
     // Bug fix
@@ -583,13 +529,13 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // if by accident selection went outside the input
     // basically do nothing with it
     if (refs.root.current.contains(textNode.parentElement)) {
-      const end = range.endOffset;
-      const start = end - refs.search.current.length;
-      const pre = textContent.slice(0, start);
+      const end = range_2.endOffset;
+      const start_0 = end - refs.search.current.length;
+      const pre = textContent.slice(0, start_0);
       const post = textContent.slice(end);
 
       // Insert before anchorNode pre, item mention, and post
-      if (pre) textNode.parentElement.insertBefore(window.document.createTextNode(pre), windowSelection.anchorNode);
+      if (pre) textNode.parentElement.insertBefore(window.document.createTextNode(pre), windowSelection_2.anchorNode);
       const span = window.document.createElement('span');
       span.className = classesElement.join(' ');
       span.dataset.onesyLabel = `@${itemName}`;
@@ -597,18 +543,18 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       span.dataset.onesyObject = `${versionMention}`;
       span.dataset.onesyId = item.id;
       span.innerHTML = `@${itemName}`;
-      textNode.parentElement.insertBefore(span, windowSelection.anchorNode);
+      textNode.parentElement.insertBefore(span, windowSelection_2.anchorNode);
 
       // 1 space only following the item mention
-      textNode.parentElement.insertBefore(window.document.createTextNode('\u00A0'), windowSelection.anchorNode);
-      if (post) textNode.parentElement.insertBefore(window.document.createTextNode(post), windowSelection.anchorNode);
+      textNode.parentElement.insertBefore(window.document.createTextNode('\u00A0'), windowSelection_2.anchorNode);
+      if (post) textNode.parentElement.insertBefore(window.document.createTextNode(post), windowSelection_2.anchorNode);
 
       // Remove the text node
       textNode.remove();
 
       // Invoke onChange method with new value
-      const valueInput = (0, _utils.innerHTMLToText)(refs.root.current.innerHTML);
-      if ((0, _utils.is)('function', refs.onChange.current)) refs.onChange.current(valueInput, {
+      const valueInput_0 = (0, _utils.innerHTMLToText)(refs.root.current.innerHTML);
+      if ((0, _utils.is)('function', refs.onChange.current)) refs.onChange.current(valueInput_0, {
         target: refs.root.current
       });
 
@@ -621,7 +567,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
     // Close the search
     onCloseSearch();
-  }, [onChange]);
+  };
 
   // If users response & not open, open
   // else if no users response & opened, close the search
@@ -647,37 +593,37 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     // setError(error_);
   }, [error_]);
-  const label = _react.default.useCallback(() => (0, _utils.is)('function', mentionLabel) ? mentionLabel(optionsMention, {
+  const label = () => (0, _utils.is)('function', mentionLabel) ? mentionLabel(optionsMention, {
     addTag
   }) : /*#__PURE__*/_react.default.createElement(Line, {
     className: classes.menu
   }, /*#__PURE__*/_react.default.createElement(List, {
     size: "small",
     className: classes.list
-  }, optionsMention === null || optionsMention === void 0 ? void 0 : optionsMention.map((item, index) => {
-    var _item$name;
+  }, optionsMention === null || optionsMention === void 0 ? void 0 : optionsMention.map((item_0, index) => {
+    var _item_0$name;
     return /*#__PURE__*/_react.default.createElement(ListItem, {
       key: index,
       start: /*#__PURE__*/_react.default.createElement(Avatar, {
-        color: (0, _utils.stringToColor)(item.name),
+        color: (0, _utils.stringToColor)(item_0.name),
         size: "small"
-      }, (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.slice(0, 1)),
+      }, (_item_0$name = item_0.name) === null || _item_0$name === void 0 ? void 0 : _item_0$name.slice(0, 1)),
       primary: /*#__PURE__*/_react.default.createElement(Type, {
         version: "l3"
-      }, item.name),
-      onClick: () => addTag(item),
+      }, item_0.name),
+      onClick: () => addTag(item_0),
       button: true
     });
-  }))), [optionsMention]);
+  })));
   const paste = async () => {
     const valueClipboard = await navigator.clipboard.read();
     if (valueClipboard) {
-      let values = '';
-      for (const item of Array.from(valueClipboard)) {
-        const valueItem = await item.getType('text/html');
-        values += await valueItem.text();
+      let values_1 = '';
+      for (const item_1 of Array.from(valueClipboard)) {
+        const valueItem = await item_1.getType('text/html');
+        values_1 += await valueItem.text();
       }
-      rootDocument.execCommand('insertHTML', undefined, values);
+      rootDocument.execCommand('insertHTML', undefined, values_1);
     }
   };
   const query = command => {
@@ -698,77 +644,77 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       name: 'strike-line',
       command: 'strikeThrough'
     }];
-    updateOptionValues.forEach(item => {
-      if (query(item.command)) selected.push(item.name);
+    updateOptionValues.forEach(item_2 => {
+      if (query(item_2.command)) selected.push(item_2.name);
     });
     setTextSelected(selected);
   };
-  const onMouseUp = _react.default.useCallback(() => {
+  const onMouseUp = () => {
     if (!refs.edit.current) return;
-    const selection_ = refs.rootWindow.current.getSelection();
-    if (!selection_) return;
-    if (!selection_.anchorNode || !refs.root.current.contains(selection_.anchorNode)) return setTextSelection(null);
+    const selection__0 = refs.rootWindow.current.getSelection();
+    if (!selection__0) return;
+    if (!selection__0.anchorNode || !refs.root.current.contains(selection__0.anchorNode)) return setTextSelection(null);
     setTimeout(() => {
-      var _selection_$anchorNod2;
-      const rect = selection_.getRangeAt(0).getBoundingClientRect();
+      var _selection__0$anchorN;
+      const rect = selection__0.getRangeAt(0).getBoundingClientRect();
       setTextSelection(Math.round(rect.width) ? {
         selection: rect,
-        element: (_selection_$anchorNod2 = selection_.anchorNode) === null || _selection_$anchorNod2 === void 0 ? void 0 : _selection_$anchorNod2.parentElement
+        element: (_selection__0$anchorN = selection__0.anchorNode) === null || _selection__0$anchorN === void 0 ? void 0 : _selection__0$anchorN.parentElement
       } : null);
       textQueryUpdate();
     }, 140);
-  }, []);
-  const onMouseDown = _react.default.useCallback(() => {
+  };
+  const onMouseDown = () => {
     if (!refs.edit.current) return;
     textQueryUpdate();
-  }, []);
-  const onKeyUp = _react.default.useCallback(() => {
+  };
+  const onKeyUp = () => {
     if (!refs.edit.current) return;
     textQueryUpdate();
-  }, []);
-  const textMethod = _react.default.useCallback(command => argument => {
+  };
+  const textMethod = command_0 => argument => {
     var _refs$textSelection$c;
-    switch (command) {
+    switch (command_0) {
       // updates
       case 'italic':
         refs.rootDocument.current.execCommand('italic');
-        if (query('italic')) setTextSelected(values => [...values, 'italic']);else setTextSelected(values => values.filter(item => item !== 'italic'));
+        if (query('italic')) setTextSelected(values_24 => [...values_24, 'italic']);else setTextSelected(values_25 => values_25.filter(item_20 => item_20 !== 'italic'));
         break;
       case 'underline':
         refs.rootDocument.current.execCommand('underline');
-        if (query('underline')) setTextSelected(values => [...values, 'underline']);else setTextSelected(values => values.filter(item => item !== 'underline'));
+        if (query('underline')) setTextSelected(values_22 => [...values_22, 'underline']);else setTextSelected(values_23 => values_23.filter(item_19 => item_19 !== 'underline'));
         break;
       case 'bold':
         refs.rootDocument.current.execCommand('bold');
-        if (query('bold')) setTextSelected(values => [...values, 'bold']);else setTextSelected(values => values.filter(item => item !== 'bold'));
+        if (query('bold')) setTextSelected(values_20 => [...values_20, 'bold']);else setTextSelected(values_21 => values_21.filter(item_18 => item_18 !== 'bold'));
         break;
       case 'strike-line':
         refs.rootDocument.current.execCommand('strikeThrough');
-        if (query('strikeThrough')) setTextSelected(values => [...values, 'strike-line']);else setTextSelected(values => values.filter(item => item !== 'strike-line'));
+        if (query('strikeThrough')) setTextSelected(values_18 => [...values_18, 'strike-line']);else setTextSelected(values_19 => values_19.filter(item_17 => item_17 !== 'strike-line'));
         break;
       case 'align-left':
         refs.rootDocument.current.execCommand('justifyLeft');
-        if (query('justifyLeft')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-left']);else setTextSelected(values => values.filter(item => item !== 'align-left'));
+        if (query('justifyLeft')) setTextSelected(values_16 => [...values_16.filter(item_15 => !item_15.includes('align')), 'align-left']);else setTextSelected(values_17 => values_17.filter(item_16 => item_16 !== 'align-left'));
         break;
       case 'align-center':
         refs.rootDocument.current.execCommand('justifyCenter');
-        if (query('justifyCenter')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-center']);else setTextSelected(values => values.filter(item => item !== 'align-center'));
+        if (query('justifyCenter')) setTextSelected(values_14 => [...values_14.filter(item_13 => !item_13.includes('align')), 'align-center']);else setTextSelected(values_15 => values_15.filter(item_14 => item_14 !== 'align-center'));
         break;
       case 'align-right':
         refs.rootDocument.current.execCommand('justifyRight');
-        if (query('justifyRight')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-right']);else setTextSelected(values => values.filter(item => item !== 'align-right'));
+        if (query('justifyRight')) setTextSelected(values_12 => [...values_12.filter(item_11 => !item_11.includes('align')), 'align-right']);else setTextSelected(values_13 => values_13.filter(item_12 => item_12 !== 'align-right'));
         break;
       case 'align-justify':
         refs.rootDocument.current.execCommand('justifyFull');
-        if (query('justifyFull')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-justify']);else setTextSelected(values => values.filter(item => item !== 'align-justify'));
+        if (query('justifyFull')) setTextSelected(values_10 => [...values_10.filter(item_9 => !item_9.includes('align')), 'align-justify']);else setTextSelected(values_11 => values_11.filter(item_10 => item_10 !== 'align-justify'));
         break;
       case 'superscript':
         refs.rootDocument.current.execCommand('superscript');
-        if (query('superscript')) setTextSelected(values => [...values, 'superscript']);else setTextSelected(values => values.filter(item => item !== 'superscript'));
+        if (query('superscript')) setTextSelected(values_8 => [...values_8, 'superscript']);else setTextSelected(values_9 => values_9.filter(item_8 => item_8 !== 'superscript'));
         break;
       case 'subscript':
         refs.rootDocument.current.execCommand('subscript');
-        if (query('subscript')) setTextSelected(values => [...values, 'subscript']);else setTextSelected(values => values.filter(item => item !== 'subscript'));
+        if (query('subscript')) setTextSelected(values_6 => [...values_6, 'subscript']);else setTextSelected(values_7 => values_7.filter(item_7 => item_7 !== 'subscript'));
         break;
       case 'indent':
         refs.rootDocument.current.execCommand('indent');
@@ -801,11 +747,11 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         break;
       case 'list-ordered':
         refs.rootDocument.current.execCommand('insertOrderedList');
-        if (query('insertOrderedList')) setTextSelected(values => [...values.filter(item => !item.includes('list')), 'list-ordered']);else setTextSelected(values => values.filter(item => item !== 'list-ordered'));
+        if (query('insertOrderedList')) setTextSelected(values_4 => [...values_4.filter(item_5 => !item_5.includes('list')), 'list-ordered']);else setTextSelected(values_5 => values_5.filter(item_6 => item_6 !== 'list-ordered'));
         break;
       case 'list-unordered':
         refs.rootDocument.current.execCommand('insertUnorderedList');
-        if (query('insertUnorderedList')) setTextSelected(values => [...values.filter(item => !item.includes('list')), 'list-unordered']);else setTextSelected(values => values.filter(item => item !== 'list-unordered'));
+        if (query('insertUnorderedList')) setTextSelected(values_2 => [...values_2.filter(item_3 => !item_3.includes('list')), 'list-unordered']);else setTextSelected(values_3 => values_3.filter(item_4 => item_4 !== 'list-unordered'));
         break;
       case 'horizontal-rule':
         refs.rootDocument.current.execCommand('insertHorizontalRule');
@@ -851,18 +797,18 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       default:
         break;
     }
-    const element = (_refs$textSelection$c = refs.textSelection.current) === null || _refs$textSelection$c === void 0 ? void 0 : _refs$textSelection$c.element;
-    if (element) {
-      let valueElement = element.innerHTML || '';
-      if (element.textContent === '') {
+    const element_0 = (_refs$textSelection$c = refs.textSelection.current) === null || _refs$textSelection$c === void 0 ? void 0 : _refs$textSelection$c.element;
+    if (element_0) {
+      let valueElement = element_0.innerHTML || '';
+      if (element_0.textContent === '') {
         valueElement = '';
-        element.innerHTML = '';
+        element_0.innerHTML = '';
       }
       if (valueElement) valueElement = (0, _utils.innerHTMLToText)(valueElement);
     }
     textQueryUpdate();
-  }, []);
-  const PaletteItem = _react.default.useCallback(propsItem => {
+  };
+  const PaletteItem = propsItem => {
     const {
         color: color_
       } = propsItem,
@@ -873,19 +819,19 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         background: color_
       }
     }, other_));
-  }, []);
-  const Palette = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((propsPalette, ref_) => {
+  };
+  const Palette = /*#__PURE__*/_react.default.forwardRef((propsPalette, ref_) => {
     const {
         version: version_,
         onUpdate: onUpdate_,
         onClose
       } = propsPalette,
-      other_ = (0, _objectWithoutProperties2.default)(propsPalette, _excluded3);
+      other__0 = (0, _objectWithoutProperties2.default)(propsPalette, _excluded3);
     const onUpdateColor = itemColor => {
       if (refs.range.current) {
-        const selection_ = refs.rootWindow.current.getSelection();
-        selection_.removeAllRanges();
-        selection_.addRange(refs.range.current);
+        const selection__1 = refs.rootWindow.current.getSelection();
+        selection__1.removeAllRanges();
+        selection__1.addRange(refs.range.current);
       }
       onUpdate_(itemColor);
       onClose();
@@ -898,7 +844,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other_), /*#__PURE__*/_react.default.createElement(Line, {
+    }, other__0), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
       style: {
         maxHeight: 136,
@@ -921,18 +867,18 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onClick: () => {
         onUpdateColor('#ffffff');
       }
-    })), Object.keys(_styleReact.colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
-      key: index,
+    })), Object.keys(_styleReact.colors).filter(item_21 => !['black', 'white'].includes(item_21)).map((item_22, index_0) => /*#__PURE__*/_react.default.createElement(Line, {
+      key: index_0,
       gap: 0.5,
       direction: "row",
       style: {
         width: '100%'
       }
-    }, Object.keys(_styleReact.colors[item]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
+    }, Object.keys(_styleReact.colors[item_22]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
       key: index_,
-      color: _styleReact.colors[item][item_],
+      color: _styleReact.colors[item_22][item_],
       onClick: () => {
-        onUpdateColor(_styleReact.colors[item][item_]);
+        onUpdateColor(_styleReact.colors[item_22][item_]);
       }
     }))))), /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
@@ -949,7 +895,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       version: "outlined",
       size: "small",
       value: refs.inputValues.current[version_],
-      onChange: valueNew => updateInputValues(version_, valueNew)
+      onChange: valueNew_2 => updateInputValues(version_, valueNew_2)
     }, ColorTextFieldProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className, classes.textFieldColor])
     })), /*#__PURE__*/_react.default.createElement(Button, {
@@ -959,15 +905,15 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       size: "small",
       onClick: () => {
         if (refs.range.current) {
-          const selection_ = refs.rootWindow.current.getSelection();
-          selection_.removeAllRanges();
-          selection_.addRange(refs.range.current);
+          const selection__2 = refs.rootWindow.current.getSelection();
+          selection__2.removeAllRanges();
+          selection__2.addRange(refs.range.current);
         }
         onUpdate_(refs.inputValues.current[version_]);
         onClose();
       }
     }, "Apply")));
-  }), []);
+  });
   const AppendProps = {
     padding: [14, 14]
   };
@@ -987,7 +933,7 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const ToggleButtonProps = {
     size: 'small'
   };
-  const Input = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((propsInput, ref_) => {
+  const Input = /*#__PURE__*/_react.default.forwardRef((propsInput, ref__0) => {
     const {
         label: labelInput,
         labelButton,
@@ -998,15 +944,15 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         InputComponent = TextField,
         InputProps
       } = propsInput,
-      other_ = (0, _objectWithoutProperties2.default)(propsInput, _excluded4);
+      other__1 = (0, _objectWithoutProperties2.default)(propsInput, _excluded4);
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: ref_,
+      ref: ref__0,
       gap: 1,
       direction: "column",
       color: "themed",
       Component: Surface
-    }, other_, {
-      className: (0, _styleReact.classNames)([other_ === null || other_ === void 0 ? void 0 : other_.className, classes.inputWrapper])
+    }, other__1, {
+      className: (0, _styleReact.classNames)([other__1 === null || other__1 === void 0 ? void 0 : other__1.className, classes.inputWrapper])
     }), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
       direction: "row",
@@ -1033,16 +979,16 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       size: "small",
       onClick: onClick
     }, labelButton)));
-  }), []);
-  const WrapperAppend = _react.default.useCallback(propsWrapper => {
+  });
+  const WrapperAppend = propsWrapper => {
     const {
         open: open_,
-        element,
+        element: element_1,
         anchorElement,
-        onClose,
+        onClose: onClose_0,
         children: childrenWrapperAppend
       } = propsWrapper,
-      other_ = (0, _objectWithoutProperties2.default)(propsWrapper, _excluded5);
+      other__2 = (0, _objectWithoutProperties2.default)(propsWrapper, _excluded5);
     return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
       open: open_,
       element: /*#__PURE__*/_react.default.createElement("div", {
@@ -1050,25 +996,26 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }, /*#__PURE__*/_react.default.createElement(Fade, {
         in: open_,
         add: true
-      }, /*#__PURE__*/_react.default.cloneElement(element))),
+      }, /*#__PURE__*/_react.default.cloneElement(element_1))),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other_), childrenWrapperAppend.props)));
-  }, []);
-  const WrapperToggleButton = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((propsWrapperToggleButton, ref_) => {
+    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other__2), childrenWrapperAppend.props)));
+  };
+  const WrapperToggleButton = /*#__PURE__*/_react.default.forwardRef((propsWrapperToggleButton, ref__1) => {
     const {
-        open: open_,
+        open: open__0,
         name: nameWrapperToogleButton,
         children: childrenWrapperToggleButton
       } = propsWrapperToggleButton,
-      other_ = (0, _objectWithoutProperties2.default)(propsWrapperToggleButton, _excluded6);
+      other__3 = (0, _objectWithoutProperties2.default)(propsWrapperToggleButton, _excluded6);
     return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      open: open_ !== undefined ? open_ : undefined,
+      ref: ref__1,
+      open: open__0 !== undefined ? open__0 : undefined,
       name: nameWrapperToogleButton
-    }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other_), childrenWrapperToggleButton.props)));
-  }), []);
+    }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other__3), childrenWrapperToggleButton.props)));
+  });
   const updateElements = {
     'italic': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
       name: l('Italic')
@@ -1117,14 +1064,14 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         name: l('Link'),
         labelButton: l('Add'),
         value: refs.inputValues.current.link,
-        onChange: valueNew => updateInputValues('link', valueNew),
+        onChange: valueNew_3 => updateInputValues('link', valueNew_3),
         placeholder: l('URL'),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            if (!selection_) return;
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__3 = refs.rootWindow.current.getSelection();
+            if (!selection__3) return;
+            selection__3.removeAllRanges();
+            selection__3.addRange(refs.range.current);
           }
           textMethod('link-add')(refs.inputValues.current.link);
           updateOpen('linkMiniMenu', false);
@@ -1157,9 +1104,9 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         onClose: () => updateOpen('color', false),
         onUpdate: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__4 = refs.rootWindow.current.getSelection();
+            selection__4.removeAllRanges();
+            selection__4.addRange(refs.range.current);
           }
           textMethod('font-color');
         }
@@ -1284,18 +1231,18 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       open: !!textSelection,
       element: body => {
         const {
-          ref: ref_,
-          values,
+          ref: ref__2,
+          values: values_26,
           style: styleAppend
         } = body;
         return /*#__PURE__*/_react.default.createElement("div", {
-          ref: item => {
-            if (ref_) {
-              if ((0, _utils.is)('function', ref_)) ref_(item);else ref_.current = item;
-              refs.miniMenu.current = item;
+          ref: item_23 => {
+            if (ref__2) {
+              if ((0, _utils.is)('function', ref__2)) ref__2(item_23);else ref__2.current = item_23;
+              refs.miniMenu.current = item_23;
             }
           },
-          style: _objectSpread(_objectSpread(_objectSpread({}, (values === null || values === void 0 ? void 0 : values.x) === 0 && (values === null || values === void 0 ? void 0 : values.y) === 0 ? {
+          style: _objectSpread(_objectSpread(_objectSpread({}, (values_26 === null || values_26 === void 0 ? void 0 : values_26.x) === 0 && (values_26 === null || values_26 === void 0 ? void 0 : values_26.y) === 0 ? {
             visibility: 'hidden'
           } : undefined), styleAppend), {}, {
             zIndex: 1500
@@ -1343,11 +1290,11 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     });
   }, [openMenu, optionsMention, selectionMenu, label]);
   let main = /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
-    ref: item => {
+    ref: item_24 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_24);else ref.current = item_24;
       }
-      refs.root.current = item;
+      refs.root.current = item_24;
     },
     color: color,
     tonal: tonal,
@@ -1373,10 +1320,10 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onMouseDown,
       'data-placeholder': placeholder !== undefined ? placeholder : name
     }, inputProps), {}, {
-      ref: item => {
-        refs.input.current = item;
+      ref: item_25 => {
+        refs.input.current = item_25;
         if (inputProps !== null && inputProps !== void 0 && inputProps.ref) {
-          if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+          if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item_25);else inputProps.ref.current = item_25;
         }
       }
     }),
@@ -1384,15 +1331,15 @@ const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-root', `onesy-SmartTextField-version-${version}`, `onesy-SmartTextField-size-${size}`], className, classes.root])
   }, additional, other));
   if (version === 'text') main = /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    ref: item => {
+    ref: item_26 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_26);else ref.current = item_26;
       }
       if (inputProps !== null && inputProps !== void 0 && inputProps.ref) {
-        if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+        if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item_26);else inputProps.ref.current = item_26;
       }
-      refs.root.current = item;
-      refs.input.current = item;
+      refs.root.current = item_26;
+      refs.input.current = item_26;
     },
     color: color,
     tonal: tonal,