@onesy/ui-react 1.0.155 → 1.0.156

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 (9) hide show
  1. package/AutoComplete/AutoComplete.js +13 -4
  2. package/Select/Select.js +88 -89
  3. package/TextField/TextField.js +17 -14
  4. package/esm/AutoComplete/AutoComplete.js +13 -4
  5. package/esm/Select/Select.js +88 -89
  6. package/esm/TextField/TextField.js +17 -14
  7. package/esm/index.js +1 -1
  8. package/index.js +1 -1
  9. package/package.json +1 -1
package/AutoComplete/AutoComplete.js CHANGED
@@ -38,7 +38,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
38
38
  input_: {
39
39
  alignSelf: 'center'
40
40
  },
41
- input: _objectSpread({
41
+ input: {
42
42
  display: 'inline-flex',
43
43
  margin: '0px',
44
44
  border: '0px',
@@ -47,8 +47,16 @@ const useStyle = (0, _styleReact.style)(theme => ({
47
47
  '-webkit-tap-highlight-color': 'transparent',
48
48
  textAlign: 'start',
49
49
  borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
50
- minHeight: 20
51
- }, theme.typography.values.b2),
50
+ minHeight: 20,
51
+ // overflow
52
+ width: '100%',
53
+ overflow: 'hidden',
54
+ whiteSpace: 'pre',
55
+ textOverflow: 'ellipsis'
56
+ },
57
+ input_size_small: _objectSpread({}, theme.typography.values.b2),
58
+ input_size_regular: _objectSpread({}, theme.typography.values.b2),
59
+ input_size_large: _objectSpread({}, theme.typography.values.b1),
52
60
  inputWrapper_multiple_size_small: {
53
61
  minHeight: '48px',
54
62
  columnGap: '6px',
@@ -485,6 +493,7 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
485
493
  }, ChipProps, other_), renderValue(item));
486
494
  });
487
495
  if ((0, _utils.is)('number', limit) && !open && value.length - limit > 0) values.push(/*#__PURE__*/_react.default.createElement(Type, {
496
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
488
497
  color: "default",
489
498
  className: classes.limitText
490
499
  }, "+", value.length - limit));
@@ -668,7 +677,7 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
668
677
  onBlur: onBlur,
669
678
  onMouseDown: onMouseDown,
670
679
  onKeyDown: onEnterKeyDown,
671
- className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AutoComplete', theme) && ['onesy-AutoComplete-input', multiple && [chip && `onesy-AutoComplete-chip`, open && `onesy-AutoComplete-open`, readOnly && `onesy-Select-readOnly`]], multiple && [classes.input, chip && classes.chip, open && classes.open, readOnly && classes.readOnly]])
680
+ className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AutoComplete', theme) && ['onesy-AutoComplete-input', multiple && [chip && `onesy-AutoComplete-chip`, open && `onesy-AutoComplete-open`, readOnly && `onesy-Select-readOnly`]], multiple && [classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]])
672
681
  }, renderValues(value, onUnselect)), !noInputValue && multiple && chip && !!value.length && renderValues(value, onUnselect)), /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
673
682
  ref: refs.menu,
674
683
  open: open && !!(menuItems !== null && menuItems !== void 0 && menuItems.length),
package/Select/Select.js CHANGED
@@ -25,99 +25,98 @@ var _utils2 = require("../utils");
25
25
  const _excluded = ["tonal", "color", "size", "version", "value", "valueDefault", "onChange", "options", "name", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "getLabel", "getOptionName", "fullWidth", "chip", "clear", "readOnly", "noSelectText", "disabled", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "ListItemProps", "ListItemTypeProps", "ListItemTypePrimaryProps", "ListItemTypeSecondaryProps", "IconButtonProps", "IconProps", "className", "style", "children"];
26
26
  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; }
27
27
  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) { (0, _defineProperty2.default)(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; }
28
- const useStyle = (0, _styleReact.style)(theme => {
29
- const overflow = {
28
+ const useStyle = (0, _styleReact.style)(theme => ({
29
+ root: {
30
+ flex: 'unset',
31
+ minWidth: '184px',
32
+ '& .onesy-TextField-input': {
33
+ position: 'absolute',
34
+ left: '0',
35
+ bottom: '0',
36
+ pointerEvents: 'none',
37
+ opacity: '0'
38
+ },
39
+ '& .onesy-TextField-input-wrapper': {
40
+ cursor: 'pointer'
41
+ }
42
+ },
43
+ wrapper: {
44
+ position: 'relative'
45
+ },
46
+ inputWrapper: {
47
+ overflow: 'hidden',
48
+ cursor: 'pointer',
49
+ '&.onesy-TextField-input-wrapper': {
50
+ cursor: 'pointer'
51
+ }
52
+ },
53
+ inputWrapper_chip_size_small: {
54
+ minHeight: '48px'
55
+ },
56
+ inputWrapper_chip_size_regular: {
57
+ minHeight: '56px'
58
+ },
59
+ inputWrapper_chip_size_large: {
60
+ minHeight: '64px'
61
+ },
62
+ input: {
63
+ display: 'flex',
64
+ alignItems: 'center',
65
+ minHeight: 20,
66
+ margin: '0',
67
+ border: '0',
68
+ color: theme.palette.text.default.primary,
69
+ background: 'transparent',
70
+ '-webkit-tap-highlight-color': 'transparent',
71
+ textAlign: 'start',
72
+ borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
73
+ cursor: 'pointer',
74
+ pointerEvents: 'none',
75
+ // overflow
30
76
  width: '100%',
31
77
  overflow: 'hidden',
32
78
  whiteSpace: 'pre',
33
79
  textOverflow: 'ellipsis'
34
- };
35
- return {
36
- root: {
37
- flex: 'unset',
38
- minWidth: '184px',
39
- '& .onesy-TextField-input': {
40
- position: 'absolute',
41
- left: '0',
42
- bottom: '0',
43
- pointerEvents: 'none',
44
- opacity: '0'
45
- },
46
- '& .onesy-TextField-input-wrapper': {
47
- cursor: 'pointer'
48
- }
49
- },
50
- wrapper: {
51
- position: 'relative'
52
- },
53
- inputWrapper: {
54
- overflow: 'hidden',
55
- cursor: 'pointer',
56
- '&.onesy-TextField-input-wrapper': {
57
- cursor: 'pointer'
58
- }
59
- },
60
- inputWrapper_chip_size_small: {
61
- minHeight: '48px'
62
- },
63
- inputWrapper_chip_size_regular: {
64
- minHeight: '56px'
65
- },
66
- inputWrapper_chip_size_large: {
67
- minHeight: '64px'
68
- },
69
- input: _objectSpread(_objectSpread({
70
- display: 'flex',
71
- alignItems: 'center',
72
- width: '100%',
73
- minHeight: 20,
74
- margin: '0',
75
- border: '0',
76
- color: theme.palette.text.default.primary,
77
- background: 'transparent',
78
- '-webkit-tap-highlight-color': 'transparent',
79
- textAlign: 'start',
80
- borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
81
- cursor: 'pointer',
82
- pointerEvents: 'none'
83
- }, theme.typography.values.b2), overflow),
84
- chip: {
85
- '&.onesy-TextField-input-wrapper': {
86
- height: 'unset'
87
- }
88
- },
89
- chipGroup: {
90
- pointerEvents: 'auto'
91
- },
92
- chipGroup_padding: {
93
- paddingTop: theme.methods.space.value(0.5, 'px')
94
- },
95
- arrow: {
96
- transition: theme.methods.transitions.make('transform')
97
- },
98
- arrow_open: {
99
- transform: 'rotate(-180deg)'
100
- },
101
- open: {
102
- '&.onesy-TextField-root': {
103
- cursor: 'default'
104
- }
105
- },
106
- fullWidth: {
107
- width: '100%'
108
- },
109
- readOnly: {
110
- '&.onesy-TextField-root': {
111
- cursor: 'default'
112
- }
113
- },
114
- disabled: {
115
- '&.onesy-TextField-root': {
116
- cursor: 'default'
117
- }
80
+ },
81
+ input_size_small: _objectSpread({}, theme.typography.values.b2),
82
+ input_size_regular: _objectSpread({}, theme.typography.values.b2),
83
+ input_size_large: _objectSpread({}, theme.typography.values.b1),
84
+ chip: {
85
+ '&.onesy-TextField-input-wrapper': {
86
+ height: 'unset'
118
87
  }
119
- };
120
- }, {
88
+ },
89
+ chipGroup: {
90
+ pointerEvents: 'auto'
91
+ },
92
+ chipGroup_padding: {
93
+ paddingTop: theme.methods.space.value(0.5, 'px')
94
+ },
95
+ arrow: {
96
+ transition: theme.methods.transitions.make('transform')
97
+ },
98
+ arrow_open: {
99
+ transform: 'rotate(-180deg)'
100
+ },
101
+ open: {
102
+ '&.onesy-TextField-root': {
103
+ cursor: 'default'
104
+ }
105
+ },
106
+ fullWidth: {
107
+ width: '100%'
108
+ },
109
+ readOnly: {
110
+ '&.onesy-TextField-root': {
111
+ cursor: 'default'
112
+ }
113
+ },
114
+ disabled: {
115
+ '&.onesy-TextField-root': {
116
+ cursor: 'default'
117
+ }
118
+ }
119
+ }), {
121
120
  name: 'onesy-Select'
122
121
  });
123
122
  const getValue = value => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
@@ -450,7 +449,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
450
449
  }, other), /*#__PURE__*/_react.default.createElement(Line, {
451
450
  gap: 0,
452
451
  direction: "row",
453
- className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Select', theme) && ['onesy-Select-input'], classes.input, chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
452
+ className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Select', theme) && ['onesy-Select-input'], classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
454
453
  justify: other.align
455
454
  }, renderValues(value))), (!!items.length || children) && /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
456
455
  ref: refs.menu,
package/TextField/TextField.js CHANGED
@@ -117,7 +117,7 @@ const useStyle = (0, _styleReact.style)(theme => {
117
117
  inputWrapper_focus: {
118
118
  opacity: '1'
119
119
  },
120
- input: _objectSpread(_objectSpread({
120
+ input: _objectSpread({
121
121
  // Reset
122
122
  margin: '0',
123
123
  border: '0',
@@ -126,23 +126,26 @@ const useStyle = (0, _styleReact.style)(theme => {
126
126
  background: 'transparent',
127
127
  '-webkit-tap-highlight-color': 'transparent',
128
128
  textAlign: 'start'
129
- }, theme.typography.values.b2), overflow),
129
+ }, overflow),
130
+ input_size_small: _objectSpread({}, theme.typography.values.b2),
131
+ input_size_regular: _objectSpread({}, theme.typography.values.b2),
132
+ input_size_large: _objectSpread({}, theme.typography.values.b1),
130
133
  multiline: {
131
134
  resize: 'none',
132
135
  overflow: 'auto',
133
136
  whiteSpace: 'normal'
134
137
  },
135
- input_size_small: {
138
+ inputWrapper_size_small: {
136
139
  // height: '48px',
137
140
  padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
138
141
  paddingTop: theme.methods.space.value(2.5, 'px')
139
142
  },
140
- input_size_regular: {
143
+ inputWrapper_size_regular: {
141
144
  // height: '56px',
142
145
  padding: `11px ${theme.methods.space.value(2, 'px')}`,
143
146
  paddingTop: theme.methods.space.value(3, 'px')
144
147
  },
145
- input_size_large: {
148
+ inputWrapper_size_large: {
146
149
  // height: '64px',
147
150
  padding: theme.methods.space.value(2, 'px'),
148
151
  paddingTop: theme.methods.space.value(3.5, 'px')
@@ -885,7 +888,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
885
888
  }, /*#__PURE__*/_react.default.createElement("legend", {
886
889
  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus])
887
890
  }, label, required ? '*' : '', optional ? ` (${optionalText})` : ''))), label && /*#__PURE__*/_react.default.createElement(Type, {
888
- version: "b2",
891
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
889
892
  id: refs.ids.label,
890
893
  Component: "label",
891
894
  className: (0, _styleReact.classNames)([(0, _utils2.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`]]])
@@ -900,10 +903,10 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
900
903
  style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
901
904
  });
902
905
  }))), prefix !== undefined && /*#__PURE__*/_react.default.createElement(Type, {
903
- className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-prefix'], classes.addition, classes.prefix, (start || version === 'text') && classes.prefix_noStartMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.prefix_focus, noPrefixMargin && classes.noPrefixMargin, minimal && !label && classes[`addition_without_label_size_${size}`]]),
904
- version: "b2"
906
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
907
+ className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-prefix'], classes.addition, classes.prefix, (start || version === 'text') && classes.prefix_noStartMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.prefix_focus, noPrefixMargin && classes.noPrefixMargin, minimal && !label && classes[`addition_without_label_size_${size}`]])
905
908
  }, prefix), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, InputWrapperProps, {
906
- className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className, (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus, classes[`input_version_${version}`], classes[`input_size_${size}`], classes[`input_version_${version}_size_${size}`], (prefix || start) && classes.input_start_icon, (sufix || end) && classes.input_end_icon, minimal && !label && classes[`inputWrapper_without_label_size_${size}`]]),
909
+ className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className, (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus, classes[`input_version_${version}`], classes[`inputWrapper_size_${size}`], classes[`input_version_${version}_size_${size}`], (prefix || start) && classes.input_start_icon, (sufix || end) && classes.input_end_icon, minimal && !label && classes[`inputWrapper_without_label_size_${size}`]]),
907
910
  onClick: onInputWrapperClick,
908
911
  onMouseUp: onInputWrapperMouseUp,
909
912
  onMouseDown: onInputWrapperMouseDown,
@@ -918,7 +921,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
918
921
  if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
919
922
  }
920
923
  },
921
- className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input'], classes.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className, multiline && classes.multiline, align && classes[`input_align_${align}`]]),
924
+ className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input'], classes.input, classes[`input_size_${size}`], inputProps === null || inputProps === void 0 ? void 0 : inputProps.className, multiline && classes.multiline, align && classes[`input_align_${align}`]]),
922
925
  onFocus: onFocus,
923
926
  onBlur: onBlur,
924
927
  placeholder: placeholder,
@@ -931,8 +934,8 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
931
934
  disabled: disabled,
932
935
  style: _objectSpread(_objectSpread({}, styles.input), inputProps.style)
933
936
  }))), sufix !== undefined && /*#__PURE__*/_react.default.createElement(Type, {
934
- className: (0, _styleReact.classNames)([(0, _utils2.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]),
935
- version: "b2"
937
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
938
+ className: (0, _styleReact.classNames)([(0, _utils2.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])
936
939
  }, sufix), !minimal && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!_react.default.Children.toArray(end).length && /*#__PURE__*/_react.default.createElement("span", {
937
940
  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end !== null && end !== void 0 && (_type2 = end.type) !== null && _type2 !== void 0 && (_type2 = _type2.displayName) !== null && _type2 !== void 0 && _type2.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${endVerticalAlign}`]])
938
941
  }, _react.default.Children.toArray(end).map((item, index) => {
@@ -949,11 +952,11 @@ const TextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
949
952
  justify: "space-between",
950
953
  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-footer'], classes.footer, classes[`footer_version_${version}`]])
951
954
  }, (helperText || required) && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
952
- version: "b3"
955
+ version: ['small', 'regular'].includes(size) ? 'b3' : 'b2'
953
956
  }, HelperTextProps, {
954
957
  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-helper-text', error && 'onesy-TextField-error'], HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className, classes.helperText, error && classes.error_color])
955
958
  }), helperText !== undefined ? helperText : required ? `*${l('required')}` : ''), counter && /*#__PURE__*/_react.default.createElement(Type, {
956
- version: "b3",
959
+ version: ['small', 'regular'].includes(size) ? 'b3' : 'b2',
957
960
  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color])
958
961
  }, ((_String = String(value)) === null || _String === void 0 ? void 0 : _String.length) || 0, "/", counter)), footer_));
959
962
  });
package/esm/AutoComplete/AutoComplete.js CHANGED
@@ -31,7 +31,7 @@ const useStyle = styleMethod(theme => ({
31
31
  input_: {
32
32
  alignSelf: 'center'
33
33
  },
34
- input: _objectSpread({
34
+ input: {
35
35
  display: 'inline-flex',
36
36
  margin: '0px',
37
37
  border: '0px',
@@ -40,8 +40,16 @@ const useStyle = styleMethod(theme => ({
40
40
  '-webkit-tap-highlight-color': 'transparent',
41
41
  textAlign: 'start',
42
42
  borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
43
- minHeight: 20
44
- }, theme.typography.values.b2),
43
+ minHeight: 20,
44
+ // overflow
45
+ width: '100%',
46
+ overflow: 'hidden',
47
+ whiteSpace: 'pre',
48
+ textOverflow: 'ellipsis'
49
+ },
50
+ input_size_small: _objectSpread({}, theme.typography.values.b2),
51
+ input_size_regular: _objectSpread({}, theme.typography.values.b2),
52
+ input_size_large: _objectSpread({}, theme.typography.values.b1),
45
53
  inputWrapper_multiple_size_small: {
46
54
  minHeight: '48px',
47
55
  columnGap: '6px',
@@ -436,6 +444,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
436
444
  }, ChipProps, other_), renderValue(item));
437
445
  });
438
446
  if (is('number', limit) && !open && value.length - limit > 0) values.push(/*#__PURE__*/React.createElement(Type, {
447
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
439
448
  color: "default",
440
449
  className: classes.limitText
441
450
  }, "+", value.length - limit));
@@ -616,7 +625,7 @@ const AutoComplete = /*#__PURE__*/React.forwardRef((props_, ref) => {
616
625
  onBlur: onBlur,
617
626
  onMouseDown: onMouseDown,
618
627
  onKeyDown: onEnterKeyDown,
619
- className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input', multiple && [chip && `onesy-AutoComplete-chip`, open && `onesy-AutoComplete-open`, readOnly && `onesy-Select-readOnly`]], multiple && [classes.input, chip && classes.chip, open && classes.open, readOnly && classes.readOnly]])
628
+ className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input', multiple && [chip && `onesy-AutoComplete-chip`, open && `onesy-AutoComplete-open`, readOnly && `onesy-Select-readOnly`]], multiple && [classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]])
620
629
  }, renderValues(value, onUnselect)), !noInputValue && multiple && chip && !!value.length && renderValues(value, onUnselect)), /*#__PURE__*/React.createElement(Menu, _extends({
621
630
  ref: refs.menu,
622
631
  open: open && !!menuItems?.length,
package/esm/Select/Select.js CHANGED
@@ -18,99 +18,98 @@ import TextFieldElement from '../TextField';
18
18
  import IconButtonElement from '../IconButton';
19
19
  import LineElement from '../Line';
20
20
  import { staticClassName } from '../utils';
21
- const useStyle = styleMethod(theme => {
22
- const overflow = {
21
+ const useStyle = styleMethod(theme => ({
22
+ root: {
23
+ flex: 'unset',
24
+ minWidth: '184px',
25
+ '& .onesy-TextField-input': {
26
+ position: 'absolute',
27
+ left: '0',
28
+ bottom: '0',
29
+ pointerEvents: 'none',
30
+ opacity: '0'
31
+ },
32
+ '& .onesy-TextField-input-wrapper': {
33
+ cursor: 'pointer'
34
+ }
35
+ },
36
+ wrapper: {
37
+ position: 'relative'
38
+ },
39
+ inputWrapper: {
40
+ overflow: 'hidden',
41
+ cursor: 'pointer',
42
+ '&.onesy-TextField-input-wrapper': {
43
+ cursor: 'pointer'
44
+ }
45
+ },
46
+ inputWrapper_chip_size_small: {
47
+ minHeight: '48px'
48
+ },
49
+ inputWrapper_chip_size_regular: {
50
+ minHeight: '56px'
51
+ },
52
+ inputWrapper_chip_size_large: {
53
+ minHeight: '64px'
54
+ },
55
+ input: {
56
+ display: 'flex',
57
+ alignItems: 'center',
58
+ minHeight: 20,
59
+ margin: '0',
60
+ border: '0',
61
+ color: theme.palette.text.default.primary,
62
+ background: 'transparent',
63
+ '-webkit-tap-highlight-color': 'transparent',
64
+ textAlign: 'start',
65
+ borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
66
+ cursor: 'pointer',
67
+ pointerEvents: 'none',
68
+ // overflow
23
69
  width: '100%',
24
70
  overflow: 'hidden',
25
71
  whiteSpace: 'pre',
26
72
  textOverflow: 'ellipsis'
27
- };
28
- return {
29
- root: {
30
- flex: 'unset',
31
- minWidth: '184px',
32
- '& .onesy-TextField-input': {
33
- position: 'absolute',
34
- left: '0',
35
- bottom: '0',
36
- pointerEvents: 'none',
37
- opacity: '0'
38
- },
39
- '& .onesy-TextField-input-wrapper': {
40
- cursor: 'pointer'
41
- }
42
- },
43
- wrapper: {
44
- position: 'relative'
45
- },
46
- inputWrapper: {
47
- overflow: 'hidden',
48
- cursor: 'pointer',
49
- '&.onesy-TextField-input-wrapper': {
50
- cursor: 'pointer'
51
- }
52
- },
53
- inputWrapper_chip_size_small: {
54
- minHeight: '48px'
55
- },
56
- inputWrapper_chip_size_regular: {
57
- minHeight: '56px'
58
- },
59
- inputWrapper_chip_size_large: {
60
- minHeight: '64px'
61
- },
62
- input: _objectSpread(_objectSpread({
63
- display: 'flex',
64
- alignItems: 'center',
65
- width: '100%',
66
- minHeight: 20,
67
- margin: '0',
68
- border: '0',
69
- color: theme.palette.text.default.primary,
70
- background: 'transparent',
71
- '-webkit-tap-highlight-color': 'transparent',
72
- textAlign: 'start',
73
- borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
74
- cursor: 'pointer',
75
- pointerEvents: 'none'
76
- }, theme.typography.values.b2), overflow),
77
- chip: {
78
- '&.onesy-TextField-input-wrapper': {
79
- height: 'unset'
80
- }
81
- },
82
- chipGroup: {
83
- pointerEvents: 'auto'
84
- },
85
- chipGroup_padding: {
86
- paddingTop: theme.methods.space.value(0.5, 'px')
87
- },
88
- arrow: {
89
- transition: theme.methods.transitions.make('transform')
90
- },
91
- arrow_open: {
92
- transform: 'rotate(-180deg)'
93
- },
94
- open: {
95
- '&.onesy-TextField-root': {
96
- cursor: 'default'
97
- }
98
- },
99
- fullWidth: {
100
- width: '100%'
101
- },
102
- readOnly: {
103
- '&.onesy-TextField-root': {
104
- cursor: 'default'
105
- }
106
- },
107
- disabled: {
108
- '&.onesy-TextField-root': {
109
- cursor: 'default'
110
- }
73
+ },
74
+ input_size_small: _objectSpread({}, theme.typography.values.b2),
75
+ input_size_regular: _objectSpread({}, theme.typography.values.b2),
76
+ input_size_large: _objectSpread({}, theme.typography.values.b1),
77
+ chip: {
78
+ '&.onesy-TextField-input-wrapper': {
79
+ height: 'unset'
111
80
  }
112
- };
113
- }, {
81
+ },
82
+ chipGroup: {
83
+ pointerEvents: 'auto'
84
+ },
85
+ chipGroup_padding: {
86
+ paddingTop: theme.methods.space.value(0.5, 'px')
87
+ },
88
+ arrow: {
89
+ transition: theme.methods.transitions.make('transform')
90
+ },
91
+ arrow_open: {
92
+ transform: 'rotate(-180deg)'
93
+ },
94
+ open: {
95
+ '&.onesy-TextField-root': {
96
+ cursor: 'default'
97
+ }
98
+ },
99
+ fullWidth: {
100
+ width: '100%'
101
+ },
102
+ readOnly: {
103
+ '&.onesy-TextField-root': {
104
+ cursor: 'default'
105
+ }
106
+ },
107
+ disabled: {
108
+ '&.onesy-TextField-root': {
109
+ cursor: 'default'
110
+ }
111
+ }
112
+ }), {
114
113
  name: 'onesy-Select'
115
114
  });
116
115
  const getValue = value => value?.value !== undefined ? value.value : value;
@@ -411,7 +410,7 @@ const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
411
410
  }, other), /*#__PURE__*/React.createElement(Line, {
412
411
  gap: 0,
413
412
  direction: "row",
414
- className: classNames([staticClassName('Select', theme) && ['onesy-Select-input'], classes.input, chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
413
+ className: classNames([staticClassName('Select', theme) && ['onesy-Select-input'], classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
415
414
  justify: other.align
416
415
  }, renderValues(value))), (!!items.length || children) && /*#__PURE__*/React.createElement(Menu, _extends({
417
416
  ref: refs.menu,
package/esm/TextField/TextField.js CHANGED
@@ -110,7 +110,7 @@ const useStyle = styleMethod(theme => {
110
110
  inputWrapper_focus: {
111
111
  opacity: '1'
112
112
  },
113
- input: _objectSpread(_objectSpread({
113
+ input: _objectSpread({
114
114
  // Reset
115
115
  margin: '0',
116
116
  border: '0',
@@ -119,23 +119,26 @@ const useStyle = styleMethod(theme => {
119
119
  background: 'transparent',
120
120
  '-webkit-tap-highlight-color': 'transparent',
121
121
  textAlign: 'start'
122
- }, theme.typography.values.b2), overflow),
122
+ }, overflow),
123
+ input_size_small: _objectSpread({}, theme.typography.values.b2),
124
+ input_size_regular: _objectSpread({}, theme.typography.values.b2),
125
+ input_size_large: _objectSpread({}, theme.typography.values.b1),
123
126
  multiline: {
124
127
  resize: 'none',
125
128
  overflow: 'auto',
126
129
  whiteSpace: 'normal'
127
130
  },
128
- input_size_small: {
131
+ inputWrapper_size_small: {
129
132
  // height: '48px',
130
133
  padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
131
134
  paddingTop: theme.methods.space.value(2.5, 'px')
132
135
  },
133
- input_size_regular: {
136
+ inputWrapper_size_regular: {
134
137
  // height: '56px',
135
138
  padding: `11px ${theme.methods.space.value(2, 'px')}`,
136
139
  paddingTop: theme.methods.space.value(3, 'px')
137
140
  },
138
- input_size_large: {
141
+ inputWrapper_size_large: {
139
142
  // height: '64px',
140
143
  padding: theme.methods.space.value(2, 'px'),
141
144
  paddingTop: theme.methods.space.value(3.5, 'px')
@@ -858,7 +861,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
858
861
  }, /*#__PURE__*/React.createElement("legend", {
859
862
  className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus])
860
863
  }, label, required ? '*' : '', optional ? ` (${optionalText})` : ''))), label && /*#__PURE__*/React.createElement(Type, {
861
- version: "b2",
864
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
862
865
  id: refs.ids.label,
863
866
  Component: "label",
864
867
  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`]]])
@@ -870,10 +873,10 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
870
873
  color: item.props?.color !== undefined ? item.props?.color : theme.palette.text.default.secondary,
871
874
  style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
872
875
  }))))), prefix !== undefined && /*#__PURE__*/React.createElement(Type, {
873
- className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-prefix'], classes.addition, classes.prefix, (start || version === 'text') && classes.prefix_noStartMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.prefix_focus, noPrefixMargin && classes.noPrefixMargin, minimal && !label && classes[`addition_without_label_size_${size}`]]),
874
- version: "b2"
876
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
877
+ className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-prefix'], classes.addition, classes.prefix, (start || version === 'text') && classes.prefix_noStartMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.prefix_focus, noPrefixMargin && classes.noPrefixMargin, minimal && !label && classes[`addition_without_label_size_${size}`]])
875
878
  }, prefix), /*#__PURE__*/React.createElement("div", _extends({}, InputWrapperProps, {
876
- className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, InputWrapperProps?.className, (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus, classes[`input_version_${version}`], classes[`input_size_${size}`], classes[`input_version_${version}_size_${size}`], (prefix || start) && classes.input_start_icon, (sufix || end) && classes.input_end_icon, minimal && !label && classes[`inputWrapper_without_label_size_${size}`]]),
879
+ className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, InputWrapperProps?.className, (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus, classes[`input_version_${version}`], classes[`inputWrapper_size_${size}`], classes[`input_version_${version}_size_${size}`], (prefix || start) && classes.input_start_icon, (sufix || end) && classes.input_end_icon, minimal && !label && classes[`inputWrapper_without_label_size_${size}`]]),
877
880
  onClick: onInputWrapperClick,
878
881
  onMouseUp: onInputWrapperMouseUp,
879
882
  onMouseDown: onInputWrapperMouseDown,
@@ -888,7 +891,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
888
891
  if (is('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
889
892
  }
890
893
  },
891
- className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input'], classes.input, inputProps?.className, multiline && classes.multiline, align && classes[`input_align_${align}`]]),
894
+ className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input'], classes.input, classes[`input_size_${size}`], inputProps?.className, multiline && classes.multiline, align && classes[`input_align_${align}`]]),
892
895
  onFocus: onFocus,
893
896
  onBlur: onBlur,
894
897
  placeholder: placeholder,
@@ -901,8 +904,8 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
901
904
  disabled: disabled,
902
905
  style: _objectSpread(_objectSpread({}, styles.input), inputProps.style)
903
906
  }))), sufix !== undefined && /*#__PURE__*/React.createElement(Type, {
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]),
905
- version: "b2"
907
+ version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
908
+ 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])
906
909
  }, sufix), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, !!React.Children.toArray(end).length && /*#__PURE__*/React.createElement("span", {
907
910
  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}`]])
908
911
  }, React.Children.toArray(end).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
@@ -916,11 +919,11 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
916
919
  justify: "space-between",
917
920
  className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-footer'], classes.footer, classes[`footer_version_${version}`]])
918
921
  }, (helperText || required) && /*#__PURE__*/React.createElement(Type, _extends({
919
- version: "b3"
922
+ version: ['small', 'regular'].includes(size) ? 'b3' : 'b2'
920
923
  }, HelperTextProps, {
921
924
  className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-helper-text', error && 'onesy-TextField-error'], HelperTextProps?.className, classes.helperText, error && classes.error_color])
922
925
  }), helperText !== undefined ? helperText : required ? `*${l('required')}` : ''), counter && /*#__PURE__*/React.createElement(Type, {
923
- version: "b3",
926
+ version: ['small', 'regular'].includes(size) ? 'b3' : 'b2',
924
927
  className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color])
925
928
  }, String(value)?.length || 0, "/", counter)), footer_));
926
929
  });
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.154
1
+ /** @license UiReact v1.0.155
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/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.154
1
+ /** @license UiReact v1.0.155
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.155",
3
+ "version": "1.0.156",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar Erić <lazareric1@proton.me>",