@onesy/ui-react 1.0.164 → 1.0.167

package/esm/SmartTextField/SmartTextField.js

@@ -150,24 +150,24 @@ const useStyle = styleMethod(theme => ({
 const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySmartTextField?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
-  const List = React.useMemo(() => theme?.elements?.List || ListElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const Avatar = React.useMemo(() => theme?.elements?.Avatar || AvatarElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const ToggleButton = React.useMemo(() => theme?.elements?.ToggleButton || ToggleButtonElement, [theme]);
-  const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
-  const ToggleButtons = React.useMemo(() => theme?.elements?.ToggleButtons || ToggleButtonsElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
-  const ColorTextField = React.useMemo(() => theme?.elements?.ColorTextField || ColorTextFieldElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySmartTextField?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const TextField = theme?.elements?.TextField || TextFieldElement;
+  const List = theme?.elements?.List || ListElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const Avatar = theme?.elements?.Avatar || AvatarElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Button = theme?.elements?.Button || ButtonElement;
+  const Append = theme?.elements?.Append || AppendElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const ToggleButton = theme?.elements?.ToggleButton || ToggleButtonElement;
+  const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
+  const ToggleButtons = theme?.elements?.ToggleButtons || ToggleButtonsElement;
+  const Menu = theme?.elements?.Menu || MenuElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
+  const ColorTextField = theme?.elements?.ColorTextField || ColorTextFieldElement;
   const {
       tonal = true,
       color = 'default',
@@ -281,14 +281,14 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const rootWindow = rootDocument && (rootDocument.defaultView || window);
   refs.rootDocument.current = rootDocument;
   refs.rootWindow.current = rootWindow;
-  const init = React.useCallback(() => {
+  const init = () => {
     if (version === 'text') {
       const valueNew = valueDefault || value || '';
       if (refs.root.current) {
         refs.root.current.innerHTML = valueNew;
       }
     }
-  }, [version, value, valueDefault]);
+  };
   React.useEffect(() => {
     // init
     init();
@@ -298,8 +298,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [hash(optionsMention_)]);
   React.useEffect(() => {
     const valuePrevious = (refs.root.current.innerHTML || '').replaceAll(' ', ' ');
-    const valueNew = textToInnerHTML(value_);
-    if (value_ !== undefined && valuePrevious !== valueNew) validate(!value_ ? '' : sanitize(value_));
+    const valueNew_0 = textToInnerHTML(value_);
+    if (value_ !== undefined && valuePrevious !== valueNew_0) validate(!value_ ? '' : sanitize(value_));
   }, [value_]);
 
   // Save selection to revive, use it on execComand
@@ -312,12 +312,12 @@ const SmartTextField = /*#__PURE__*/React.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.useCallback(element => {
+  const validateElement = element => {
     if (element?.children) {
       Array.from(element?.children).forEach(child => {
         // Any tag
@@ -331,13 +331,13 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         if (child?.children) validateElement(child);
       });
     }
-  }, []);
-  const validate = React.useCallback((valueNew = undefined) => {
+  };
+  const validate = (valueNew_1 = undefined) => {
     // Save caret position
     refs.caret.current = 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
@@ -345,8 +345,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     validateElement(refs.root.current);
     if (refs.validateMeta.current.restore) caret.restore(refs.root.current, refs.caret.current);
     return refs.root.current.innerHTML;
-  }, []);
-  const getAtSearchData = React.useCallback(() => {
+  };
+  const getAtSearchData = () => {
     if (refs.root.current) {
       const windowSelection = window.document.getSelection();
       if (!(windowSelection && windowSelection.rangeCount > 0)) return;
@@ -372,9 +372,9 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (result && result.match(/\s{2}/g)) return '';
       return result;
     }
-  }, []);
+  };
   refs.search.current = getAtSearchData();
-  const onInput = React.useCallback(event => {
+  const onInput = event => {
     if (refs.root.current) {
       let valueInput = refs.root.current.innerHTML || '';
       if (refs.root.current.textContent === '') {
@@ -390,7 +390,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setValue(valueInput);
       if (is('function', refs.onChange.current)) refs.onChange.current(valueInput, event);
     }
-  }, []);
+  };
   React.useEffect(() => {
     if (mention && refs.search.current !== undefined) onChangeMention?.(refs.search.current, '@');
   }, [mention, refs.search.current]);
@@ -404,13 +404,13 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       window.document.removeEventListener('selectionchange', method);
     };
   }, []);
-  const updateSelection = React.useCallback(() => {
-    const windowSelection = window.document.getSelection();
-    if (!(windowSelection && windowSelection.rangeCount > 0)) return;
-    const range = windowSelection?.getRangeAt(0);
-    if (range) setSelectionMenu(range?.getBoundingClientRect());
-  }, []);
-  const onOpenSearch = React.useCallback(async () => {
+  const updateSelection = () => {
+    const windowSelection_0 = window.document.getSelection();
+    if (!(windowSelection_0 && windowSelection_0.rangeCount > 0)) return;
+    const range_0 = windowSelection_0?.getRangeAt(0);
+    if (range_0) setSelectionMenu(range_0?.getBoundingClientRect());
+  };
+  const onOpenSearch = async () => {
     if (!refs.openMenu.current && !!refs.optionsMention.current.length) {
       // open
       setOpenMenu(true);
@@ -418,25 +418,25 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       // selection
       updateSelection();
     }
-  }, []);
-  const onCloseSearch = React.useCallback(() => {
+  };
+  const onCloseSearch = () => {
     if (refs.openMenu.current) {
       setOpenMenu(false);
       setSelectionMenu(null);
     }
-  }, []);
-  const updateOffset = React.useCallback(() => {
+  };
+  const updateOffset = () => {
     setOffset([-(refs.searchElement.current?.clientWidth || 0), 8]);
-  }, []);
-  const onFocus = React.useCallback(() => {
+  };
+  const onFocus = () => {
     // setFocus(true);
-  }, []);
-  const onBlur = React.useCallback(() => {
+  };
+  const onBlur = () => {
     // setFocus(false);
-  }, []);
-  const onKeyDown = React.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();
 
@@ -457,46 +457,46 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       //   windowSelection.addRange(range);
       // }
 
-      if (event.key === 'ArrowRight') {
+      if (event_0.key === 'ArrowRight') {
         // 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?.dataset?.onesyVersion === 'mention-user' && range.endOffset === windowSelection.anchorNode.textContent.length && caretElementParentChildNodes[caretElementParentChildNodes.length - 1] === caretElement) {
+        if (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 && keyboardStyleCommands.includes(event.key) || event.ctrlKey && keyboardStyleCommands.includes(event.key))) {
-      event.preventDefault();
+    if (!refs.edit.current && (event_0.metaKey && keyboardStyleCommands.includes(event_0.key) || event_0.ctrlKey && keyboardStyleCommands.includes(event_0.key))) {
+      event_0.preventDefault();
     }
-    if (is('function', onKeyDown_)) onKeyDown_(event);
-  }, [onKeyDown_]);
-  const onPaste = React.useCallback(event => {
+    if (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.useCallback(event => {
-    event.preventDefault();
-    const text = event.clipboardData?.getData('text/plain');
-    window.document.execCommand('insertText', false, text);
-  }, []);
-  const onDrop = React.useCallback(event => {
-    event.preventDefault();
-  }, []);
-  const addTag = React.useCallback((item, versionMention = 'user') => {
+  };
+  const onPasteText = event_2 => {
+    event_2.preventDefault();
+    const text_0 = event_2.clipboardData?.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 = caret.save(refs.root.current);
     const itemName = item.name;
@@ -504,11 +504,11 @@ const SmartTextField = /*#__PURE__*/React.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?.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?.getRangeAt(0);
+    if (!range_2) return;
+    const textNode = windowSelection_2.anchorNode;
     const textContent = textNode.textContent;
 
     // Bug fix
@@ -516,13 +516,13 @@ const SmartTextField = /*#__PURE__*/React.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}`;
@@ -530,18 +530,18 @@ const SmartTextField = /*#__PURE__*/React.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 = innerHTMLToText(refs.root.current.innerHTML);
-      if (is('function', refs.onChange.current)) refs.onChange.current(valueInput, {
+      const valueInput_0 = innerHTMLToText(refs.root.current.innerHTML);
+      if (is('function', refs.onChange.current)) refs.onChange.current(valueInput_0, {
         target: refs.root.current
       });
 
@@ -554,7 +554,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
     // Close the search
     onCloseSearch();
-  }, [onChange]);
+  };
 
   // If users response & not open, open
   // else if no users response & opened, close the search
@@ -580,34 +580,34 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     // setError(error_);
   }, [error_]);
-  const label = React.useCallback(() => is('function', mentionLabel) ? mentionLabel(optionsMention, {
+  const label = () => is('function', mentionLabel) ? mentionLabel(optionsMention, {
     addTag
   }) : /*#__PURE__*/React.createElement(Line, {
     className: classes.menu
   }, /*#__PURE__*/React.createElement(List, {
     size: "small",
     className: classes.list
-  }, optionsMention?.map((item, index) => /*#__PURE__*/React.createElement(ListItem, {
+  }, optionsMention?.map((item_0, index) => /*#__PURE__*/React.createElement(ListItem, {
     key: index,
     start: /*#__PURE__*/React.createElement(Avatar, {
-      color: stringToColor(item.name),
+      color: stringToColor(item_0.name),
       size: "small"
-    }, item.name?.slice(0, 1)),
+    }, item_0.name?.slice(0, 1)),
     primary: /*#__PURE__*/React.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 => {
@@ -628,75 +628,75 @@ const SmartTextField = /*#__PURE__*/React.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.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(() => {
-      const rect = selection_.getRangeAt(0).getBoundingClientRect();
+      const rect = selection__0.getRangeAt(0).getBoundingClientRect();
       setTextSelection(Math.round(rect.width) ? {
         selection: rect,
-        element: selection_.anchorNode?.parentElement
+        element: selection__0.anchorNode?.parentElement
       } : null);
       textQueryUpdate();
     }, 140);
-  }, []);
-  const onMouseDown = React.useCallback(() => {
+  };
+  const onMouseDown = () => {
     if (!refs.edit.current) return;
     textQueryUpdate();
-  }, []);
-  const onKeyUp = React.useCallback(() => {
+  };
+  const onKeyUp = () => {
     if (!refs.edit.current) return;
     textQueryUpdate();
-  }, []);
-  const textMethod = React.useCallback(command => argument => {
-    switch (command) {
+  };
+  const textMethod = command_0 => argument => {
+    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');
@@ -729,11 +729,11 @@ const SmartTextField = /*#__PURE__*/React.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');
@@ -779,18 +779,18 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       default:
         break;
     }
-    const element = refs.textSelection.current?.element;
-    if (element) {
-      let valueElement = element.innerHTML || '';
-      if (element.textContent === '') {
+    const element_0 = refs.textSelection.current?.element;
+    if (element_0) {
+      let valueElement = element_0.innerHTML || '';
+      if (element_0.textContent === '') {
         valueElement = '';
-        element.innerHTML = '';
+        element_0.innerHTML = '';
       }
       if (valueElement) valueElement = innerHTMLToText(valueElement);
     }
     textQueryUpdate();
-  }, []);
-  const PaletteItem = React.useCallback(propsItem => {
+  };
+  const PaletteItem = propsItem => {
     const {
         color: color_
       } = propsItem,
@@ -801,19 +801,19 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         background: color_
       }
     }, other_));
-  }, []);
-  const Palette = React.useCallback(/*#__PURE__*/React.forwardRef((propsPalette, ref_) => {
+  };
+  const Palette = /*#__PURE__*/React.forwardRef((propsPalette, ref_) => {
     const {
         version: version_,
         onUpdate: onUpdate_,
         onClose
       } = propsPalette,
-      other_ = _objectWithoutProperties(propsPalette, _excluded3);
+      other__0 = _objectWithoutProperties(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();
@@ -826,7 +826,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other_), /*#__PURE__*/React.createElement(Line, {
+    }, other__0), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       style: {
         maxHeight: 136,
@@ -849,18 +849,18 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onClick: () => {
         onUpdateColor('#ffffff');
       }
-    })), Object.keys(colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => /*#__PURE__*/React.createElement(Line, {
-      key: index,
+    })), Object.keys(colors).filter(item_21 => !['black', 'white'].includes(item_21)).map((item_22, index_0) => /*#__PURE__*/React.createElement(Line, {
+      key: index_0,
       gap: 0.5,
       direction: "row",
       style: {
         width: '100%'
       }
-    }, Object.keys(colors[item]).map((item_, index_) => /*#__PURE__*/React.createElement(PaletteItem, {
+    }, Object.keys(colors[item_22]).map((item_, index_) => /*#__PURE__*/React.createElement(PaletteItem, {
       key: index_,
-      color: colors[item][item_],
+      color: colors[item_22][item_],
       onClick: () => {
-        onUpdateColor(colors[item][item_]);
+        onUpdateColor(colors[item_22][item_]);
       }
     }))))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
@@ -877,7 +877,7 @@ const SmartTextField = /*#__PURE__*/React.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: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps?.className, classes.textFieldColor])
     })), /*#__PURE__*/React.createElement(Button, {
@@ -887,15 +887,15 @@ const SmartTextField = /*#__PURE__*/React.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]
   };
@@ -915,7 +915,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const ToggleButtonProps = {
     size: 'small'
   };
-  const Input = React.useCallback(/*#__PURE__*/React.forwardRef((propsInput, ref_) => {
+  const Input = /*#__PURE__*/React.forwardRef((propsInput, ref__0) => {
     const {
         label: labelInput,
         labelButton,
@@ -926,15 +926,15 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         InputComponent = TextField,
         InputProps
       } = propsInput,
-      other_ = _objectWithoutProperties(propsInput, _excluded4);
+      other__1 = _objectWithoutProperties(propsInput, _excluded4);
     return /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref_,
+      ref: ref__0,
       gap: 1,
       direction: "column",
       color: "themed",
       Component: Surface
-    }, other_, {
-      className: classNames([other_?.className, classes.inputWrapper])
+    }, other__1, {
+      className: classNames([other__1?.className, classes.inputWrapper])
     }), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       direction: "row",
@@ -961,16 +961,16 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       size: "small",
       onClick: onClick
     }, labelButton)));
-  }), []);
-  const WrapperAppend = React.useCallback(propsWrapper => {
+  });
+  const WrapperAppend = propsWrapper => {
     const {
         open: open_,
-        element,
+        element: element_1,
         anchorElement,
-        onClose,
+        onClose: onClose_0,
         children: childrenWrapperAppend
       } = propsWrapper,
-      other_ = _objectWithoutProperties(propsWrapper, _excluded5);
+      other__2 = _objectWithoutProperties(propsWrapper, _excluded5);
     return /*#__PURE__*/React.createElement(Append, _extends({
       open: open_,
       element: /*#__PURE__*/React.createElement("div", {
@@ -978,25 +978,26 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }, /*#__PURE__*/React.createElement(Fade, {
         in: open_,
         add: true
-      }, /*#__PURE__*/React.cloneElement(element))),
+      }, /*#__PURE__*/React.cloneElement(element_1))),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/React.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other_), childrenWrapperAppend.props)));
-  }, []);
-  const WrapperToggleButton = React.useCallback(/*#__PURE__*/React.forwardRef((propsWrapperToggleButton, ref_) => {
+    }, AppendProps), /*#__PURE__*/React.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other__2), childrenWrapperAppend.props)));
+  };
+  const WrapperToggleButton = /*#__PURE__*/React.forwardRef((propsWrapperToggleButton, ref__1) => {
     const {
-        open: open_,
+        open: open__0,
         name: nameWrapperToogleButton,
         children: childrenWrapperToggleButton
       } = propsWrapperToggleButton,
-      other_ = _objectWithoutProperties(propsWrapperToggleButton, _excluded6);
+      other__3 = _objectWithoutProperties(propsWrapperToggleButton, _excluded6);
     return /*#__PURE__*/React.createElement(Tooltip, _extends({
-      open: open_ !== undefined ? open_ : undefined,
+      ref: ref__1,
+      open: open__0 !== undefined ? open__0 : undefined,
       name: nameWrapperToogleButton
-    }, TooltipProps), /*#__PURE__*/React.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other_), childrenWrapperToggleButton.props)));
-  }), []);
+    }, TooltipProps), /*#__PURE__*/React.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other__3), childrenWrapperToggleButton.props)));
+  });
   const updateElements = {
     'italic': /*#__PURE__*/React.createElement(WrapperToggleButton, {
       name: l('Italic')
@@ -1045,14 +1046,14 @@ const SmartTextField = /*#__PURE__*/React.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);
@@ -1085,9 +1086,9 @@ const SmartTextField = /*#__PURE__*/React.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');
         }
@@ -1212,18 +1213,18 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       open: !!textSelection,
       element: body => {
         const {
-          ref: ref_,
-          values,
+          ref: ref__2,
+          values: values_26,
           style: styleAppend
         } = body;
         return /*#__PURE__*/React.createElement("div", {
-          ref: item => {
-            if (ref_) {
-              if (is('function', ref_)) ref_(item);else ref_.current = item;
-              refs.miniMenu.current = item;
+          ref: item_23 => {
+            if (ref__2) {
+              if (is('function', ref__2)) ref__2(item_23);else ref__2.current = item_23;
+              refs.miniMenu.current = item_23;
             }
           },
-          style: _objectSpread(_objectSpread(_objectSpread({}, values?.x === 0 && values?.y === 0 ? {
+          style: _objectSpread(_objectSpread(_objectSpread({}, values_26?.x === 0 && values_26?.y === 0 ? {
             visibility: 'hidden'
           } : undefined), styleAppend), {}, {
             zIndex: 1500
@@ -1271,11 +1272,11 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
   }, [openMenu, optionsMention, selectionMenu, label]);
   let main = /*#__PURE__*/React.createElement(TextField, _extends({
-    ref: item => {
+    ref: item_24 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_24);else ref.current = item_24;
       }
-      refs.root.current = item;
+      refs.root.current = item_24;
     },
     color: color,
     tonal: tonal,
@@ -1301,10 +1302,10 @@ const SmartTextField = /*#__PURE__*/React.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?.ref) {
-          if (is('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+          if (is('function', inputProps.ref)) inputProps.ref(item_25);else inputProps.ref.current = item_25;
         }
       }
     }),
@@ -1312,15 +1313,15 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([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.createElement(Type, _extends({
-    ref: item => {
+    ref: item_26 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_26);else ref.current = item_26;
       }
       if (inputProps?.ref) {
-        if (is('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+        if (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,