@onesy/ui-react 1.0.97 → 1.0.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/RichTextEditor/RichTextEditor.js +1 -16
  2. package/SmartTextField/SmartTextField.js +29 -5
  3. package/esm/RichTextEditor/RichTextEditor.js +0 -15
  4. package/esm/SmartTextField/SmartTextField.js +39 -4
  5. package/esm/index.js +1 -1
  6. package/package.json +1 -1
package/RichTextEditor/RichTextEditor.js CHANGED
@@ -202,21 +202,6 @@ const useStyle = (0, style_react_1.style)(theme => ({
202
202
  },
203
203
  textFieldColor: {
204
204
  flex: '1 1 auto'
205
- },
206
- inputColor: {
207
- border: 'none',
208
- borderRadius: theme.methods.shape.radius.value(40, 'px'),
209
- overflow: 'hidden',
210
- width: '17px',
211
- height: '17px',
212
- cursor: 'pointer',
213
- boxShadow: theme.shadows.values.default[1],
214
- '&::-webkit-color-swatch-wrapper': {
215
- padding: '0px'
216
- },
217
- '&::-webkit-color-swatch': {
218
- border: 'none'
219
- }
220
205
  }
221
206
  }), { name: 'onesy-RichTextEditor' });
222
207
  const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
@@ -291,7 +276,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
291
276
  backgroundPalette: react_1.default.useRef(null),
292
277
  linkAdd: react_1.default.useRef(null),
293
278
  linkAddInput: react_1.default.useRef(null),
294
- linkRemove: react_1.default.useRef(null),
279
+ linkRemove: react_1.default.useRef(null)
295
280
  },
296
281
  elements: {
297
282
  color: react_1.default.useRef(null),
package/SmartTextField/SmartTextField.js CHANGED
@@ -24,6 +24,8 @@ const IconMaterialFormatAlignRightW100_1 = __importDefault(require("@onesy/icons
24
24
  const IconMaterialFormatAlignJustifyW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignJustifyW100"));
25
25
  const IconMaterialFormatColorTextW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorTextW100"));
26
26
  const IconMaterialFormatColorFillW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorFillW100"));
27
+ const IconMaterialFormatListNumberedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListNumberedW100"));
28
+ const IconMaterialFormatListBulletedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListBulletedW100"));
27
29
  const IconMaterialSuperscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100"));
28
30
  const IconMaterialSubscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSubscriptW100"));
29
31
  const IconMaterialFormatItalicW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100"));
@@ -100,6 +102,26 @@ const useStyle = (0, style_react_1.style)(theme => ({
100
102
  flex: '1 1 auto !important'
101
103
  }
102
104
  },
105
+ palette: {
106
+ padding: theme.methods.space.value(1.5, 'px'),
107
+ borderRadius: theme.methods.shape.radius.value(1, 'px'),
108
+ boxShadow: theme.shadows.values.default[2]
109
+ },
110
+ paletteItem: {
111
+ position: 'relative',
112
+ width: '17px',
113
+ height: '17px',
114
+ cursor: 'pointer',
115
+ borderRadius: theme.methods.shape.radius.value(40, 'px'),
116
+ boxShadow: theme.shadows.values.default[1],
117
+ transition: theme.methods.transitions.make('box-shadow'),
118
+ '&:hover': {
119
+ boxShadow: theme.shadows.values.default[2],
120
+ }
121
+ },
122
+ textFieldColor: {
123
+ flex: '1 1 auto'
124
+ },
103
125
  helperText: {
104
126
  display: 'inline-flex',
105
127
  color: theme.palette.text.default.secondary,
@@ -793,8 +815,8 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
793
815
  }
794
816
  onUpdate_(style_react_1.colors[item][item_]);
795
817
  onClose();
796
- } }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
797
- width: '100%'
818
+ } }, 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: {
819
+ padding: 10
798
820
  } }, { 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)([
799
821
  (0, utils_2.staticClassName)('RichTextEditor', theme) && [
800
822
  'onesy-RichTextEditor-text-field-color'
@@ -882,7 +904,9 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
882
904
  'align-left': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Left') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-left'), onClick: textMethod('align-left') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignLeftW100_1.default, Object.assign({}, IconProps)) })) }))),
883
905
  'align-center': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Center') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-center'), onClick: textMethod('align-center') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignCenterW100_1.default, Object.assign({}, IconProps)) })) }))),
884
906
  'align-right': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Right') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-right'), onClick: textMethod('align-right') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignRightW100_1.default, Object.assign({}, IconProps)) })) }))),
885
- 'align-justify': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Justify') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-justify'), onClick: textMethod('align-justify') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignJustifyW100_1.default, Object.assign({}, IconProps)) })) })))
907
+ 'align-justify': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Justify') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-justify'), onClick: textMethod('align-justify') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignJustifyW100_1.default, Object.assign({}, IconProps)) })) }))),
908
+ 'list-ordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('List Ordered') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('list-ordered'), onClick: textMethod('list-ordered') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatListNumberedW100_1.default, Object.assign({}, IconProps)) })) }))),
909
+ 'list-unordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('List Unordered') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('list-unordered'), onClick: textMethod('list-unordered') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatListBulletedW100_1.default, Object.assign({}, IconProps)) })) })))
886
910
  };
887
911
  const actionElements = {
888
912
  'clear': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Clear') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('clear') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatClearW100_1.default, Object.assign({}, IconProps)) })) })))
@@ -907,9 +931,9 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
907
931
  classes.textMiniMenuWrapper
908
932
  ]) }, { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !!textSelection, add: true }, { children: (0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => {
909
933
  setTextSelection(null);
910
- }, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', color: 'themed', "aria-label": l('Mini menu'), Component: Surface, className: (0, style_react_1.classNames)([
934
+ }, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', color: 'themed', "aria-label": l('Mini menu'), Component: Surface, className: (0, style_react_1.classNames)([
911
935
  classes.textMiniMenu
912
- ]) }, { children: [(0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']] })), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']] }))), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']] }))), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['list-ordered'], updateElements['list-unordered']] }))), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['superscript'], updateElements['subscript']] })), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['link-add'], updateElements['link-remove']] })), (0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: actionElements['clear'] }))] })) })) })) })));
936
+ ]) }, { children: [(0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']] })), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']] }))), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']] }))), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['list-ordered'], updateElements['list-unordered']] }))), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['superscript'], updateElements['subscript']] })), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['link-add'], updateElements['link-remove']] })), (0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: actionElements['clear'] }))] })) })) })) })));
913
937
  }, parent: refs.root.current, anchor: textSelection === null || textSelection === void 0 ? void 0 : textSelection.selection, portal: true, alignment: 'center', position: 'bottom', clearOnClose: true }, AppendProps)));
914
938
  }, [open, textSelection, textSelected]);
915
939
  const menu = react_1.default.useMemo(() => {
package/esm/RichTextEditor/RichTextEditor.js CHANGED
@@ -203,21 +203,6 @@ const useStyle = styleMethod(theme => ({
203
203
  },
204
204
  textFieldColor: {
205
205
  flex: '1 1 auto'
206
- },
207
- inputColor: {
208
- border: 'none',
209
- borderRadius: theme.methods.shape.radius.value(40, 'px'),
210
- overflow: 'hidden',
211
- width: '17px',
212
- height: '17px',
213
- cursor: 'pointer',
214
- boxShadow: theme.shadows.values.default[1],
215
- '&::-webkit-color-swatch-wrapper': {
216
- padding: '0px'
217
- },
218
- '&::-webkit-color-swatch': {
219
- border: 'none'
220
- }
221
206
  }
222
207
  }), {
223
208
  name: 'onesy-RichTextEditor'
package/esm/SmartTextField/SmartTextField.js CHANGED
@@ -18,6 +18,8 @@ import IconMaterialFormatAlignRight from '@onesy/icons-material-rounded-react/Ic
18
18
  import IconMaterialFormatAlignJustify from '@onesy/icons-material-rounded-react/IconMaterialFormatAlignJustifyW100';
19
19
  import IconMaterialFormatColorText from '@onesy/icons-material-rounded-react/IconMaterialFormatColorTextW100';
20
20
  import IconMaterialFormatColorFill from '@onesy/icons-material-rounded-react/IconMaterialFormatColorFillW100';
21
+ import IconMaterialFormatListNumbered from '@onesy/icons-material-rounded-react/IconMaterialFormatListNumberedW100';
22
+ import IconMaterialFormatListBulleted from '@onesy/icons-material-rounded-react/IconMaterialFormatListBulletedW100';
21
23
  import IconMaterialSuperscript from '@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100';
22
24
  import IconMaterialSubscript from '@onesy/icons-material-rounded-react/IconMaterialSubscriptW100';
23
25
  import IconMaterialFormatItalic from '@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100';
@@ -100,6 +102,26 @@ const useStyle = styleMethod(theme => ({
100
102
  flex: '1 1 auto !important'
101
103
  }
102
104
  },
105
+ palette: {
106
+ padding: theme.methods.space.value(1.5, 'px'),
107
+ borderRadius: theme.methods.shape.radius.value(1, 'px'),
108
+ boxShadow: theme.shadows.values.default[2]
109
+ },
110
+ paletteItem: {
111
+ position: 'relative',
112
+ width: '17px',
113
+ height: '17px',
114
+ cursor: 'pointer',
115
+ borderRadius: theme.methods.shape.radius.value(40, 'px'),
116
+ boxShadow: theme.shadows.values.default[1],
117
+ transition: theme.methods.transitions.make('box-shadow'),
118
+ '&:hover': {
119
+ boxShadow: theme.shadows.values.default[2]
120
+ }
121
+ },
122
+ textFieldColor: {
123
+ flex: '1 1 auto'
124
+ },
103
125
  helperText: {
104
126
  display: 'inline-flex',
105
127
  color: theme.palette.text.default.secondary,
@@ -831,8 +853,9 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
831
853
  gap: 0.5,
832
854
  direction: "row",
833
855
  align: "center",
856
+ fullWidth: true,
834
857
  style: {
835
- width: '100%'
858
+ padding: 10
836
859
  }
837
860
  }, /*#__PURE__*/React.createElement(ColorTextField, _extends({
838
861
  tonal: tonal,
@@ -1140,7 +1163,19 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
1140
1163
  }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
1141
1164
  selected: refs.textSelected.current.includes('align-justify'),
1142
1165
  onClick: textMethod('align-justify')
1143
- }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignJustify, IconProps)))
1166
+ }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignJustify, IconProps))),
1167
+ 'list-ordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
1168
+ name: l('List Ordered')
1169
+ }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
1170
+ selected: refs.textSelected.current.includes('list-ordered'),
1171
+ onClick: textMethod('list-ordered')
1172
+ }), /*#__PURE__*/React.createElement(IconMaterialFormatListNumbered, IconProps))),
1173
+ 'list-unordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
1174
+ name: l('List Unordered')
1175
+ }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
1176
+ selected: refs.textSelected.current.includes('list-unordered'),
1177
+ onClick: textMethod('list-unordered')
1178
+ }), /*#__PURE__*/React.createElement(IconMaterialFormatListBulleted, IconProps)))
1144
1179
  };
1145
1180
  const actionElements = {
1146
1181
  'clear': /*#__PURE__*/React.createElement(WrapperToggleButton, {
@@ -1178,7 +1213,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
1178
1213
  onClickOutside: () => {
1179
1214
  setTextSelection(null);
1180
1215
  },
1181
- include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current]
1216
+ include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current]
1182
1217
  }, /*#__PURE__*/React.createElement(Line, {
1183
1218
  gap: 2,
1184
1219
  direction: "row",
@@ -1189,7 +1224,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
1189
1224
  "aria-label": l('Mini menu'),
1190
1225
  Component: Surface,
1191
1226
  className: classNames([classes.textMiniMenu])
1192
- }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['list-ordered'], updateElements['list-unordered']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
1227
+ }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['list-ordered'], updateElements['list-unordered']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
1193
1228
  },
1194
1229
  parent: refs.root.current,
1195
1230
  anchor: textSelection?.selection,
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.97
1
+ /** @license UiReact v1.0.98
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onesy/ui-react",
3
- "version": "1.0.97",
3
+ "version": "1.0.98",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar <lazareric2@gmail.com>",