@onesy/ui-react 1.0.98 → 1.0.99

package/RichTextEditor/RichTextEditor.js

@@ -314,7 +314,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
     react_1.default.useEffect(() => {
         var _a, _b;
         const selection_ = refs.rootWindow.current.getSelection();
-        if (selection_.anchorNode &&
+        if (selection_ &&
+            selection_.anchorNode &&
             !((_b = (_a = selection_.anchorNode) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('TextField')))
             refs.range.current = selection_.getRangeAt(0);
     }, [open]);

package/SmartTextField/SmartTextField.js

@@ -57,7 +57,10 @@ const useStyle = (0, style_react_1.style)(theme => ({
     root: {
         minHeight: '20px',
         width: '100%',
-        '& .onesy-TextField-input': Object.assign({ wordBreak: 'break-word', color: theme.methods.palette.color.value('primary', 10) }, theme.typography.values.b2)
+        '& .onesy-TextField-input': Object.assign({ wordBreak: 'break-word', color: theme.methods.palette.color.value('primary', 10) }, theme.typography.values.b2),
+        '& ul, ol': {
+            listStylePosition: 'inside'
+        }
     },
     root_type: {
         minHeight: '20px',
@@ -85,7 +88,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
         boxShadow: theme.shadows.values.default[2]
     },
     textMiniMenuAdditionalMenu: {
-        width: 'clamp(140px, 90%, 250px)',
+        minWidth: 'clamp(140px, 90%, 250px)',
         zIndex: '1514'
     },
     inputWrapper: {
@@ -97,7 +100,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
         whiteSpace: 'nowrap',
         overflow: 'hidden'
     },
-    inputLink: {
+    input: {
         '&.onesy-TextField-root': {
             flex: '1 1 auto !important'
         }
@@ -120,7 +123,9 @@ const useStyle = (0, style_react_1.style)(theme => ({
         }
     },
     textFieldColor: {
-        flex: '1 1 auto'
+        '&.onesy-ColorTextField-root': {
+            flex: '1 1 auto'
+        }
     },
     helperText: {
         display: 'inline-flex',
@@ -595,9 +600,14 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         }, 140);
     }, []);
     const onMouseDown = react_1.default.useCallback(() => {
+        var _a, _b;
         if (!refs.edit.current)
             return;
         textQueryUpdate();
+        const selection_ = refs.rootWindow.current.getSelection();
+        if (selection_.anchorNode &&
+            !((_b = (_a = selection_.anchorNode) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('TextField')))
+            refs.range.current = selection_.getRangeAt(0);
     }, []);
     const onKeyUp = react_1.default.useCallback(() => {
         if (!refs.edit.current)
@@ -797,7 +807,11 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                     'onesy-RichTextEditor-palette'
                 ],
                 classes.palette
-            ]) }, other_, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, onMouseUp: onMouseUp, onMouseDown: onMouseDown }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', style: {
+            ]) }, other_, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, onMouseUp: onMouseUp, onMouseDown: onMouseDown, style: {
+                        maxHeight: 136,
+                        padding: 10,
+                        overflow: 'hidden auto'
+                    } }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', style: {
                                 width: '100%'
                             } }, { children: [(0, jsx_runtime_1.jsx)(PaletteItem, { color: '#000000', onClick: () => {
                                         onUpdate_('#000000');
@@ -853,13 +867,13 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         size: 'small'
     };
     const Input = react_1.default.useCallback(react_1.default.forwardRef((propsInput, ref_) => {
-        const { label: labelInput, labelButton, value: value__, onChange: onChange__, onClick, InputComponent = TextField, InputProps } = propsInput, other_ = __rest(propsInput, ["label", "labelButton", "value", "onChange", "onClick", "InputComponent", "InputProps"]);
+        const { label: labelInput, labelButton, value: value__, onChange: onChange__, onClick, placeholder: placeholderInputProps, InputComponent = TextField, InputProps } = propsInput, other_ = __rest(propsInput, ["label", "labelButton", "value", "onChange", "onClick", "placeholder", "InputComponent", "InputProps"]);
         return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: ref_, gap: 1, direction: 'column', color: 'themed', Component: Surface }, other_, { className: (0, style_react_1.classNames)([
                 other_ === null || other_ === void 0 ? void 0 : other_.className,
                 classes.inputWrapper
             ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
                     width: '100%'
-                } }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ name: labelInput, version: 'outlined', size: 'small', valueDefault: value__, onChange: onChange__ }, InputProps, { style: {
+                } }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ name: labelInput, version: 'outlined', size: 'small', valueDefault: value__, onChange: onChange__, placeholder: placeholderInputProps, flex: true }, InputProps, { style: {
                             width: 'unset',
                             flex: '1 1 auto'
                         } })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'text', size: 'small', onClick: onClick }, { children: labelButton }))] })) })));
@@ -895,7 +909,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                         textMethod('link-add')(refs.inputValues.current.link);
                         updateOpen('linkMiniMenu', false);
                         updateInputValues('link', '');
-                    }, className: classes.inputLink }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Link'), open: refs.open.current.linkMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.linkAdd }, ToggleButtonProps, { selected: refs.open.current.linkMiniMenu, onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialAddLinkW100_1.default, Object.assign({}, IconProps)) })) })) }))),
+                    }, className: classes.input }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Link'), open: refs.open.current.linkMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.linkAdd }, ToggleButtonProps, { selected: refs.open.current.linkMiniMenu, onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialAddLinkW100_1.default, Object.assign({}, IconProps)) })) })) }))),
         'link-remove': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Remove Link') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('link-remove') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialLinkOffW100_1.default, Object.assign({}, IconProps)) })) }))),
         'font-color': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.color, anchorElement: refs.elements.color.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('color', false), include: [refs.elements.color.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-color', onClose: () => updateOpen('color', false), onUpdate: textMethod('font-color') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.color ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.color }, ToggleButtonProps, { selected: refs.open.current.color, onClick: () => updateOpen('color', !refs.open.current.color) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorTextW100_1.default, Object.assign({}, IconProps)) })) })) }))),
         'font-color-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.colorMiniMenu, anchorElement: refs.miniMenuElements.color, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('colorMiniMenu', false), include: [refs.miniMenuElements.color] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.colorPalette, version: 'font-color', onClose: () => updateOpen('colorMiniMenu', false), onUpdate: textMethod('font-color') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.colorMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.color }, ToggleButtonProps, { selected: refs.open.current.colorMiniMenu, onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorTextW100_1.default, Object.assign({}, IconProps)) })) })) }))),

package/esm/RichTextEditor/RichTextEditor.js

@@ -380,7 +380,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
   }, [value]);
   React.useEffect(() => {
     const selection_ = refs.rootWindow.current.getSelection();
-    if (selection_.anchorNode && !selection_.anchorNode?.className?.includes('TextField')) refs.range.current = selection_.getRangeAt(0);
+    if (selection_ && selection_.anchorNode && !selection_.anchorNode?.className?.includes('TextField')) refs.range.current = selection_.getRangeAt(0);
   }, [open]);
   React.useEffect(() => {
     if (!selection) {

package/esm/SmartTextField/SmartTextField.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "miniMenuExtended", "HelperTextProps", "ColorTextFieldProps", "className"],
   _excluded2 = ["color"],
   _excluded3 = ["version", "onUpdate", "onClose"],
-  _excluded4 = ["label", "labelButton", "value", "onChange", "onClick", "InputComponent", "InputProps"],
+  _excluded4 = ["label", "labelButton", "value", "onChange", "onClick", "placeholder", "InputComponent", "InputProps"],
   _excluded5 = ["open", "element", "anchorElement", "onClose", "children"],
   _excluded6 = ["open", "name", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -54,7 +54,10 @@ const useStyle = styleMethod(theme => ({
     '& .onesy-TextField-input': _objectSpread({
       wordBreak: 'break-word',
       color: theme.methods.palette.color.value('primary', 10)
-    }, theme.typography.values.b2)
+    }, theme.typography.values.b2),
+    '& ul, ol': {
+      listStylePosition: 'inside'
+    }
   },
   root_type: {
     minHeight: '20px',
@@ -85,7 +88,7 @@ const useStyle = styleMethod(theme => ({
     boxShadow: theme.shadows.values.default[2]
   },
   textMiniMenuAdditionalMenu: {
-    width: 'clamp(140px, 90%, 250px)',
+    minWidth: 'clamp(140px, 90%, 250px)',
     zIndex: '1514'
   },
   inputWrapper: {
@@ -97,7 +100,7 @@ const useStyle = styleMethod(theme => ({
     whiteSpace: 'nowrap',
     overflow: 'hidden'
   },
-  inputLink: {
+  input: {
     '&.onesy-TextField-root': {
       flex: '1 1 auto !important'
     }
@@ -120,7 +123,9 @@ const useStyle = styleMethod(theme => ({
     }
   },
   textFieldColor: {
-    flex: '1 1 auto'
+    '&.onesy-ColorTextField-root': {
+      flex: '1 1 auto'
+    }
   },
   helperText: {
     display: 'inline-flex',
@@ -641,6 +646,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const onMouseDown = React.useCallback(() => {
     if (!refs.edit.current) return;
     textQueryUpdate();
+    const selection_ = refs.rootWindow.current.getSelection();
+    if (selection_.anchorNode && !selection_.anchorNode?.className?.includes('TextField')) refs.range.current = selection_.getRangeAt(0);
   }, []);
   const onKeyUp = React.useCallback(() => {
     if (!refs.edit.current) return;
@@ -811,7 +818,12 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, other_), /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       onMouseUp: onMouseUp,
-      onMouseDown: onMouseDown
+      onMouseDown: onMouseDown,
+      style: {
+        maxHeight: 136,
+        padding: 10,
+        overflow: 'hidden auto'
+      }
     }, /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       direction: "row",
@@ -909,6 +921,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         value: value__,
         onChange: onChange__,
         onClick,
+        placeholder: placeholderInputProps,
         InputComponent = TextField,
         InputProps
       } = propsInput,
@@ -933,7 +946,9 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       version: "outlined",
       size: "small",
       valueDefault: value__,
-      onChange: onChange__
+      onChange: onChange__,
+      placeholder: placeholderInputProps,
+      flex: true
     }, InputProps, {
       style: {
         width: 'unset',
@@ -1042,7 +1057,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
           updateOpen('linkMiniMenu', false);
           updateInputValues('link', '');
         },
-        className: classes.inputLink
+        className: classes.input
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
       name: l('Insert Link'),

package/esm/index.js

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

package/package.json

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