@onesy/ui-react 1.0.98 → 1.0.100

package/ColorTextField/ColorTextField.d.ts

@@ -7,6 +7,7 @@ export declare type IColorTextField = ITextField & {
     onChangeColor?: (valueNew: string) => any;
     onChangeOpacity?: (valueNew: string | number) => any;
     opacity?: boolean;
+    WrapperProps?: any;
 };
 declare const ColorTextField: React.FC<IColorTextField>;
 export default ColorTextField;

package/ColorTextField/ColorTextField.js

@@ -52,7 +52,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
         fontSize: '100%',
         background: 'transparent',
         boxSizing: 'border-box',
-        touchAction: 'manipulation',
+        touchAction: 'manipulation'
     },
     inputColor: {
         // Reset
@@ -82,7 +82,7 @@ const ColorTextField = react_1.default.forwardRef((props_, ref) => {
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyColorTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
-    const { name, version = 'outlined', size = 'regular', valueDefault, value: value_, valueColor: valueColor_, valueOpacity: valueOpacity_, onChange: onChange_, onChangeColor: onChangeColor_, onChangeOpacity: onChangeOpacity_, opacity, className } = props, other = __rest(props, ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "opacity", "className"]);
+    const { name, version = 'outlined', size = 'regular', valueDefault, value: value_, valueColor: valueColor_, valueOpacity: valueOpacity_, onChange: onChange_, onChangeColor: onChangeColor_, onChangeOpacity: onChangeOpacity_, WrapperProps, opacity, className, style } = props, other = __rest(props, ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "WrapperProps", "opacity", "className", "style"]);
     const { classes } = useStyle();
     const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_) || '');
     const [valueColor, setValueColor] = react_1.default.useState(valueColor_ !== undefined ? valueColor_ : '');
@@ -167,13 +167,11 @@ const ColorTextField = react_1.default.forwardRef((props_, ref) => {
                 `onesy-ColorTextField-version-${version}`,
                 `onesy-ColorTextField-size-${size}`
             ],
+            className,
             classes.root
-        ]), fullWidth: opacity }, (!opacity && other))));
+        ]), fullWidth: opacity, style: style }, (!opacity && other))));
     if (opacity) {
-        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 1, fullWidth: true, className: (0, style_react_1.classNames)([
-                className,
-                classes.root
-            ]) }, other, { children: [root, (0, jsx_runtime_1.jsx)(SliderInput, { name: l('Opacity'), value: valueOpacity, onChange: onChangeOpacity, min: 0, max: 100 })] })));
+        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 1, fullWidth: true }, WrapperProps, { children: [root, (0, jsx_runtime_1.jsx)(SliderInput, { name: l('Opacity'), value: valueOpacity, onChange: onChangeOpacity, min: 0, max: 100 })] })));
     }
     return root;
 });

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: '10px 10px 0',
+                        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');
@@ -816,7 +830,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                                     onUpdate_(style_react_1.colors[item][item_]);
                                     onClose();
                                 } }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', fullWidth: true, style: {
-                        padding: 10
+                        padding: '0px 10px 10px'
                     } }, { children: [(0, jsx_runtime_1.jsx)(ColorTextField, Object.assign({ tonal: tonal, color: color, name: l('Custom color'), version: 'outlined', size: 'small', value: refs.inputValues.current[version_], onChange: valueNew => updateInputValues(version_, valueNew) }, ColorTextFieldProps, { className: (0, style_react_1.classNames)([
                                 (0, utils_2.staticClassName)('RichTextEditor', theme) && [
                                     'onesy-RichTextEditor-text-field-color'
@@ -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,9 +909,16 @@ 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': ((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: () => {
+                        if (refs.range.current) {
+                            const selection_ = refs.rootWindow.current.getSelection();
+                            selection_.removeAllRanges();
+                            selection_.addRange(refs.range.current);
+                        }
+                        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)) })) })) }))),
         'font-background': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.background, anchorElement: refs.elements.background.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('background', false), include: [refs.elements.background.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-background', onClose: () => updateOpen('background', false), onUpdate: textMethod('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Background Color'), open: refs.open.current.background ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.background }, ToggleButtonProps, { selected: refs.open.current.background, onClick: () => updateOpen('background', !refs.open.current.background) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorFillW100_1.default, Object.assign({}, IconProps)) })) })) }))),
         'font-background-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.backgroundMiniMenu, anchorElement: refs.miniMenuElements.background, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('backgroundMiniMenu', false), include: [refs.miniMenuElements.background] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.backgroundPalette, version: 'font-background', onClose: () => updateOpen('backgroundMiniMenu', false), onUpdate: textMethod('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.backgroundMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.background }, ToggleButtonProps, { selected: refs.open.current.backgroundMiniMenu, onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorFillW100_1.default, Object.assign({}, IconProps)) })) })) }))),

package/esm/ColorTextField/ColorTextField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 const _excluded = ["name", "value", "onChange", "min", "max", "children", "className"],
-  _excluded2 = ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "opacity", "className"];
+  _excluded2 = ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "WrapperProps", "opacity", "className", "style"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -114,8 +114,10 @@ const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: onChange_,
       onChangeColor: onChangeColor_,
       onChangeOpacity: onChangeOpacity_,
+      WrapperProps,
       opacity,
-      className
+      className,
+      style
     } = props,
     other = _objectWithoutProperties(props, _excluded2);
   const {
@@ -192,16 +194,16 @@ const ColorTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: event => opacity ? onChangeColor(event.target.value) : onChange(event.target.value),
       className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-input-color'], classes.inputColor])
     }),
-    className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-root', `onesy-ColorTextField-version-${version}`, `onesy-ColorTextField-size-${size}`], classes.root]),
-    fullWidth: opacity
+    className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-root', `onesy-ColorTextField-version-${version}`, `onesy-ColorTextField-size-${size}`], className, classes.root]),
+    fullWidth: opacity,
+    style: style
   }, !opacity && other));
   if (opacity) {
     return /*#__PURE__*/React.createElement(Line, _extends({
       ref: ref,
       gap: 1,
-      fullWidth: true,
-      className: classNames([className, classes.root])
-    }, other), root, /*#__PURE__*/React.createElement(SliderInput, {
+      fullWidth: true
+    }, WrapperProps), root, /*#__PURE__*/React.createElement(SliderInput, {
       name: l('Opacity'),
       value: valueOpacity,
       onChange: onChangeOpacity,

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: '10px 10px 0',
+        overflow: 'hidden auto'
+      }
     }, /*#__PURE__*/React.createElement(Line, {
       gap: 0.5,
       direction: "row",
@@ -855,7 +867,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       align: "center",
       fullWidth: true,
       style: {
-        padding: 10
+        padding: '0px 10px 10px'
       }
     }, /*#__PURE__*/React.createElement(ColorTextField, _extends({
       tonal: tonal,
@@ -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'),
@@ -1067,7 +1082,14 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }, /*#__PURE__*/React.createElement(Palette, {
         version: "font-color",
         onClose: () => updateOpen('color', false),
-        onUpdate: textMethod('font-color')
+        onUpdate: () => {
+          if (refs.range.current) {
+            const selection_ = refs.rootWindow.current.getSelection();
+            selection_.removeAllRanges();
+            selection_.addRange(refs.range.current);
+          }
+          textMethod('font-color');
+        }
       }))
     }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
       name: l('Text Color'),

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.98
+/** @license UiReact v1.0.100
  *
  * 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.100",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",