@onesy/ui-react 1.0.124 → 1.0.125

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 (4) hide show
  1. package/TextField/TextField.js +35 -4
  2. package/esm/TextField/TextField.js +41 -12
  3. package/esm/index.js +1 -1
  4. package/package.json +1 -1
package/TextField/TextField.js CHANGED
@@ -247,6 +247,33 @@ const useStyle = (0, style_react_1.style)(theme => {
247
247
  icon_size_large: {
248
248
  paddingBlock: '24px'
249
249
  },
250
+ icon_version_text_size_small: {
251
+ paddingBlock: '6px'
252
+ },
253
+ icon_version_text_size_regular: {
254
+ paddingBlock: '8px'
255
+ },
256
+ icon_version_text_size_large: {
257
+ paddingBlock: '12px'
258
+ },
259
+ icon_version_outlined_size_small: {
260
+ paddingBlock: '9px'
261
+ },
262
+ icon_version_outlined_size_regular: {
263
+ paddingBlock: '12px'
264
+ },
265
+ icon_version_outlined_size_large: {
266
+ paddingBlock: '17px'
267
+ },
268
+ icon_version_filled_size_small: {
269
+ paddingBlock: '9px'
270
+ },
271
+ icon_version_filled_size_regular: {
272
+ paddingBlock: '12px'
273
+ },
274
+ icon_version_filled_size_large: {
275
+ paddingBlock: '17px'
276
+ },
250
277
  icon_button_size_small: {
251
278
  paddingBlock: '4px'
252
279
  },
@@ -672,11 +699,13 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
672
699
  ]) }), refs.ids.clear));
673
700
  }
674
701
  }
675
- const iconButtonPassword = ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: visible ? l('Hide password') : l('View password'), color: 'inverted' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onToggleVisible, color: 'default', size: 'small' }, { children: visible ? (0, jsx_runtime_1.jsx)(IconMaterialPassword2OffW100_1.default, Object.assign({}, iconProps)) : (0, jsx_runtime_1.jsx)(IconMaterialPassword2W100_1.default, Object.assign({}, iconProps)) })) })));
676
- if (value && password)
677
- endItems.unshift(iconButtonPassword);
702
+ if (value && password) {
703
+ if (!multiline && props.endVerticalAlign === undefined)
704
+ endVerticalAlign = version === 'text' ? 'end' : 'center';
705
+ endItems.unshift((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: visible ? l('Hide password') : l('View password'), color: 'inverted' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onToggleVisible, color: 'default', size: size === 'large' ? 'regular' : 'small' }, { children: visible ? (0, jsx_runtime_1.jsx)(IconMaterialPassword2OffW100_1.default, Object.assign({}, iconProps)) : (0, jsx_runtime_1.jsx)(IconMaterialPassword2W100_1.default, Object.assign({}, iconProps)) })) })));
706
+ }
678
707
  return endItems;
679
- }, [value, visible, onClear, type, end_]);
708
+ }, [value, version, multiline, visible, onClear, type, end_]);
680
709
  const valueWithData = value !== undefined && String(value);
681
710
  return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onMouseEnter, onTouchEnd: onMouseLeave, role: 'textbox', "aria-multiline": multiline, "aria-labelledby": refs.ids.label }, ComponentProps, { className: (0, style_react_1.classNames)([
682
711
  (0, utils_2.staticClassName)('TextField', theme) && [
@@ -756,6 +785,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
756
785
  classes.icon_start,
757
786
  classes[`icon${((_c = (_b = start === null || start === void 0 ? void 0 : start.type) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.includes('IconButton')) ? '_button' : ''}_size_${size}`],
758
787
  classes[`icon_version_${version}`],
788
+ classes[`icon_version_${version}_size_${size}`],
759
789
  classes[`icon_vertical_align_${startVerticalAlign}`]
760
790
  ]) }, { children: react_1.default.Children.toArray(start).map((item, index) => {
761
791
  var _a, _b, _c, _d;
@@ -834,6 +864,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
834
864
  classes.icon_end,
835
865
  classes[`icon${((_e = (_d = end === null || end === void 0 ? void 0 : end.type) === null || _d === void 0 ? void 0 : _d.displayName) === null || _e === void 0 ? void 0 : _e.includes('IconButton')) ? '_button' : ''}_size_${size}`],
836
866
  classes[`icon_version_${version}`],
867
+ classes[`icon_version_${version}_size_${size}`],
837
868
  classes[`icon_vertical_align_${endVerticalAlign}`]
838
869
  ]) }, { children: react_1.default.Children.toArray(end).map((item, index) => {
839
870
  var _a, _b, _c, _d;
package/esm/TextField/TextField.js CHANGED
@@ -326,6 +326,33 @@ const useStyle = styleMethod(theme => {
326
326
  icon_size_large: {
327
327
  paddingBlock: '24px'
328
328
  },
329
+ icon_version_text_size_small: {
330
+ paddingBlock: '6px'
331
+ },
332
+ icon_version_text_size_regular: {
333
+ paddingBlock: '8px'
334
+ },
335
+ icon_version_text_size_large: {
336
+ paddingBlock: '12px'
337
+ },
338
+ icon_version_outlined_size_small: {
339
+ paddingBlock: '9px'
340
+ },
341
+ icon_version_outlined_size_regular: {
342
+ paddingBlock: '12px'
343
+ },
344
+ icon_version_outlined_size_large: {
345
+ paddingBlock: '17px'
346
+ },
347
+ icon_version_filled_size_small: {
348
+ paddingBlock: '9px'
349
+ },
350
+ icon_version_filled_size_regular: {
351
+ paddingBlock: '12px'
352
+ },
353
+ icon_version_filled_size_large: {
354
+ paddingBlock: '17px'
355
+ },
329
356
  icon_button_size_small: {
330
357
  paddingBlock: '4px'
331
358
  },
@@ -792,17 +819,19 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
792
819
  })));
793
820
  }
794
821
  }
795
- const iconButtonPassword = /*#__PURE__*/React.createElement(Tooltip, {
796
- name: visible ? l('Hide password') : l('View password'),
797
- color: "inverted"
798
- }, /*#__PURE__*/React.createElement(IconButton, {
799
- onClick: onToggleVisible,
800
- color: "default",
801
- size: "small"
802
- }, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps)));
803
- if (value && password) endItems.unshift(iconButtonPassword);
822
+ if (value && password) {
823
+ if (!multiline && props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
824
+ endItems.unshift(/*#__PURE__*/React.createElement(Tooltip, {
825
+ name: visible ? l('Hide password') : l('View password'),
826
+ color: "inverted"
827
+ }, /*#__PURE__*/React.createElement(IconButton, {
828
+ onClick: onToggleVisible,
829
+ color: "default",
830
+ size: size === 'large' ? 'regular' : 'small'
831
+ }, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
832
+ }
804
833
  return endItems;
805
- }, [value, visible, onClear, type, end_]);
834
+ }, [value, version, multiline, visible, onClear, type, end_]);
806
835
  const valueWithData = value !== undefined && String(value);
807
836
  return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
808
837
  onMouseEnter: onMouseEnter,
@@ -834,7 +863,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
834
863
  Component: "label",
835
864
  className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-label'], classes.label, classes[`label_${multiline ? 'multiline' : 'regular'}`], classes[`label_version_${version}`], classes[`label_size_${size}`], multiline && classes[`label_size_${size}_multiline`], classes[`label_version_${version}_size_${size}`], (enabled || valueWithData || focus) && [classes[`label_focus`], classes[`label_version_${version}_focus`], classes[`label_version_${version}_size_${size}${multiline ? '_multiline' : ''}_focus`], multiline && classes.label_multiline_focus], theme.direction === 'rtl' && classes.label_rtl, start && [classes.label_icon_start, classes[`label_version_${version}_icon_start`]]])
836
865
  }, label, required ? '*' : '', optional ? ` (${optionalText})` : ''), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, !!React.Children.toArray(start).length && /*#__PURE__*/React.createElement("span", {
837
- className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_vertical_align_${startVerticalAlign}`]])
866
+ className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${startVerticalAlign}`]])
838
867
  }, React.Children.toArray(start).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
839
868
  key: index,
840
869
  size: item.props?.size !== undefined ? item.props?.size : 'regular',
@@ -875,7 +904,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
875
904
  className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-sufix'], classes.addition, classes.sufix, (end || version === 'text') && classes.sufix_noEndMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.sufix_focus, noSufixMargin && classes.noSufixMargin]),
876
905
  version: "b2"
877
906
  }, sufix), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, !!React.Children.toArray(end).length && /*#__PURE__*/React.createElement("span", {
878
- className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_vertical_align_${endVerticalAlign}`]])
907
+ className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${endVerticalAlign}`]])
879
908
  }, React.Children.toArray(end).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
880
909
  key: index,
881
910
  size: item.props?.size !== undefined ? item.props?.size : size,
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.123
1
+ /** @license UiReact v1.0.124
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.124",
3
+ "version": "1.0.125",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar Erić <lazareric1@proton.me>",