@onesy/ui-react 1.0.44 → 1.0.46

package/Emojis/Emojis.js

@@ -225,6 +225,7 @@ const Emojis = react_1.default.forwardRef((props_, ref) => {
         setOpen(false);
         setTimeout(() => {
             setOpenElement(null);
+            setSearch('');
         }, 140);
     }, []);
     const onSelect = react_1.default.useCallback((valueNew) => {
@@ -293,7 +294,7 @@ const Emojis = react_1.default.forwardRef((props_, ref) => {
     const label = ((0, jsx_runtime_1.jsx)(Line, Object.assign({ tonal: tonal, color: color, Component: Surface, className: (0, style_react_1.classNames)([
             classes.wrapper,
             classes[`size_${size}`]
-        ]) }, { children: (0, jsx_runtime_1.jsx)(SpyScroll, Object.assign({ ids: categoriesUsedIDs, parent: openElement, onActive: onActiveTab }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'unset', justify: 'unset', fullWidth: true, className: classes.categories }, { children: [(search_ || tabs_) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, fullWidth: true, className: classes.header }, { children: [search_ && ((0, jsx_runtime_1.jsx)(TextField, { name: 'Search', version: 'outlined', onChange: onChangeSearch, size: ['small', 'regular'].includes(size) ? 'small' : 'regular', fullWidth: true, clear: true })), tabs_ && !!categoriesUsed.length && ((0, jsx_runtime_1.jsx)(Tabs, Object.assign({ valueDefault: tab, value: tab, onChange: onChangeTabs, size: 'small', initialLineUpdateTimeout: 440, noDivider: true, className: classes.tabs }, { children: tabs.map((item, index) => ((0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: item.value, onClick: () => onTabClick(item.value), "data-onesy-spy-scroll": categoryToID(item.value), className: (0, style_react_1.classNames)([
+        ]) }, { children: (0, jsx_runtime_1.jsx)(SpyScroll, Object.assign({ ids: categoriesUsedIDs, parent: openElement, onActive: onActiveTab }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'unset', justify: 'unset', fullWidth: true, className: classes.categories }, { children: [(search_ || tabs_) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, fullWidth: true, className: classes.header }, { children: [search_ && ((0, jsx_runtime_1.jsx)(TextField, { name: 'Search', version: 'outlined', value: search || '', onChange: onChangeSearch, size: ['small', 'regular'].includes(size) ? 'small' : 'regular', fullWidth: true, clear: true })), tabs_ && !!categoriesUsed.length && ((0, jsx_runtime_1.jsx)(Tabs, Object.assign({ valueDefault: tab, value: tab, onChange: onChangeTabs, size: 'small', initialLineUpdateTimeout: 440, noDivider: true, className: classes.tabs }, { children: tabs.map((item, index) => ((0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: item.value, onClick: () => onTabClick(item.value), "data-onesy-spy-scroll": categoryToID(item.value), className: (0, style_react_1.classNames)([
                                         classes.tab,
                                         classes[`tab_size_${size}`]
                                     ]) }, { children: react_1.default.cloneElement(item.name, {

package/SmartTextField/SmartTextField.js

@@ -200,7 +200,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         setOptionsMention([...(optionsMention_ || [])]);
     }, [(0, utils_1.hash)(optionsMention_)]);
     react_1.default.useEffect(() => {
-        const valuePrevious = (refs.root.current.innerHTML || '').replaceAll(' ', ' ');
+        const valuePrevious = (0, utils_2.decodeHTMLEntities)(refs.root.current.innerHTML || '').replaceAll(' ', ' ');
         const valueNew = (0, utils_1.textToInnerHTML)(value_);
         if (value_ !== undefined && valuePrevious !== valueNew)
             validate(!value_ ? '' : (0, utils_2.sanitize)(value_));
@@ -287,7 +287,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
     refs.search.current = getAtSearchData();
     const onInput = react_1.default.useCallback((event) => {
         if (refs.root.current) {
-            let valueInput = refs.root.current.innerHTML || '';
+            let valueInput = (0, utils_2.decodeHTMLEntities)(refs.root.current.innerHTML || '');
             if (refs.root.current.textContent === '') {
                 valueInput = '';
                 refs.root.current.innerHTML = '';
@@ -453,7 +453,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
             // Remove the text node
             textNode.remove();
             // Invoke onChange method with new value
-            const valueInput = (0, utils_1.innerHTMLToText)(refs.root.current.innerHTML);
+            const valueInput = (0, utils_1.innerHTMLToText)((0, utils_2.decodeHTMLEntities)(refs.root.current.innerHTML));
             if ((0, utils_1.is)('function', refs.onChange.current))
                 refs.onChange.current(valueInput, { target: refs.root.current });
             // Update the caret position to be outside the span mention

package/esm/Emojis/Emojis.js

@@ -222,6 +222,7 @@ const Emojis = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setOpen(false);
     setTimeout(() => {
       setOpenElement(null);
+      setSearch('');
     }, 140);
   }, []);
   const onSelect = React.useCallback(valueNew => {
@@ -303,6 +304,7 @@ const Emojis = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, search_ && /*#__PURE__*/React.createElement(TextField, {
     name: "Search",
     version: "outlined",
+    value: search || '',
     onChange: onChangeSearch,
     size: ['small', 'regular'].includes(size) ? 'small' : 'regular',
     fullWidth: true,

package/esm/SmartTextField/SmartTextField.js

@@ -32,7 +32,7 @@ import ToggleButtonElement from '../ToggleButton';
 import ClickListenerElement from '../ClickListener';
 import ToggleButtonsElement from '../ToggleButtons';
 import MenuElement from '../Menu';
-import { sanitize, caret, keyboardStyleCommands, staticClassName } from '../utils';
+import { sanitize, caret, keyboardStyleCommands, staticClassName, decodeHTMLEntities } from '../utils';
 const useStyle = styleMethod(theme => ({
   root: {
     minHeight: '20px',
@@ -226,7 +226,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setOptionsMention([...(optionsMention_ || [])]);
   }, [hash(optionsMention_)]);
   React.useEffect(() => {
-    const valuePrevious = (refs.root.current.innerHTML || '').replaceAll(' ', ' ');
+    const valuePrevious = decodeHTMLEntities(refs.root.current.innerHTML || '').replaceAll(' ', ' ');
     const valueNew = textToInnerHTML(value_);
     if (value_ !== undefined && valuePrevious !== valueNew) validate(!value_ ? '' : sanitize(value_));
   }, [value_]);
@@ -306,7 +306,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.search.current = getAtSearchData();
   const onInput = React.useCallback(event => {
     if (refs.root.current) {
-      let valueInput = refs.root.current.innerHTML || '';
+      let valueInput = decodeHTMLEntities(refs.root.current.innerHTML || '');
       if (refs.root.current.textContent === '') {
         valueInput = '';
         refs.root.current.innerHTML = '';
@@ -471,7 +471,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       textNode.remove();
 
       // Invoke onChange method with new value
-      const valueInput = innerHTMLToText(refs.root.current.innerHTML);
+      const valueInput = innerHTMLToText(decodeHTMLEntities(refs.root.current.innerHTML));
       if (is('function', refs.onChange.current)) refs.onChange.current(valueInput, {
         target: refs.root.current
       });

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.44
+/** @license UiReact v1.0.46
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/utils.js

@@ -1253,4 +1253,8 @@ export const currencies = [{
   rounding: 0,
   code: 'ZMK',
   name_plural: 'Zambian kwachas'
-}];
+}];
+export const decodeHTMLEntities = html => {
+  const document = new DOMParser().parseFromString(html, 'text/html');
+  return document.documentElement.textContent || '';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",

package/utils.d.ts

@@ -46,3 +46,4 @@ export declare const currencies: {
     code: string;
     name_plural: string;
 }[];
+export declare const decodeHTMLEntities: (html: string) => string;

package/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.currencies = exports.iconFontSize = exports.formats = exports.toNumber = exports.caret = exports.keyboardStyleCommands = exports.keyboardStandardCommands = exports.getOverflowParent = exports.importIframeStyles = exports.replace = exports.sanitize = exports.minMaxBetweenNumbers = exports.controlPoint = exports.line = exports.angleToCoordinates = exports.matches = exports.save = exports.print = exports.canvasOldPhoto = exports.canvasInvert = exports.canvasFade = exports.canvasSaturation = exports.canvasContrast = exports.canvasBrightness = exports.image = exports.valueBreakpoints = exports.iconSizeToFontSize = exports.staticClassName = exports.reflow = void 0;
+exports.decodeHTMLEntities = exports.currencies = exports.iconFontSize = exports.formats = exports.toNumber = exports.caret = exports.keyboardStyleCommands = exports.keyboardStandardCommands = exports.getOverflowParent = exports.importIframeStyles = exports.replace = exports.sanitize = exports.minMaxBetweenNumbers = exports.controlPoint = exports.line = exports.angleToCoordinates = exports.matches = exports.save = exports.print = exports.canvasOldPhoto = exports.canvasInvert = exports.canvasFade = exports.canvasSaturation = exports.canvasContrast = exports.canvasBrightness = exports.image = exports.valueBreakpoints = exports.iconSizeToFontSize = exports.staticClassName = exports.reflow = void 0;
 const utils_1 = require("@onesy/utils");
 function reflow(element) {
     element === null || element === void 0 ? void 0 : element.offsetHeight;
@@ -1420,3 +1420,8 @@ exports.currencies = [
         name_plural: 'Zambian kwachas'
     }
 ];
+const decodeHTMLEntities = (html) => {
+    const document = new DOMParser().parseFromString(html, 'text/html');
+    return document.documentElement.textContent || '';
+};
+exports.decodeHTMLEntities = decodeHTMLEntities;