@onesy/ui-react 1.0.155 → 1.0.157

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 (13) hide show
  1. package/AutoComplete/AutoComplete.js +13 -4
  2. package/CalendarMenu/CalendarMenu.js +3 -3
  3. package/CalendarMonth/CalendarMonth.js +52 -56
  4. package/Select/Select.js +88 -89
  5. package/TextField/TextField.js +17 -14
  6. package/esm/AutoComplete/AutoComplete.js +13 -4
  7. package/esm/CalendarMenu/CalendarMenu.js +3 -3
  8. package/esm/CalendarMonth/CalendarMonth.js +52 -56
  9. package/esm/Select/Select.js +88 -89
  10. package/esm/TextField/TextField.js +17 -14
  11. package/esm/index.js +1 -1
  12. package/index.js +1 -1
  13. 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/CalendarMenu/CalendarMenu.js CHANGED
@@ -287,7 +287,7 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
287
287
  if (value !== null && value !== void 0 && (_value$repeat9 = value.repeat) !== null && _value$repeat9 !== void 0 && _value$repeat9.skip_weekends && [0, 6].includes(day.dayWeek)) repeating = false;
288
288
  if (repeating) {
289
289
  var _value$repeat0, _value$repeat1, _value$repeat$ends;
290
- const formated = (0, _date.format)(day, _utils2.formats.date);
290
+ const formatted = (0, _date.format)(day, _utils2.formats.date);
291
291
  if (value !== null && value !== void 0 && (_value$repeat0 = value.repeat) !== null && _value$repeat0 !== void 0 && (_value$repeat0 = _value$repeat0.ends) !== null && _value$repeat0 !== void 0 && _value$repeat0.active) {
292
292
  // date
293
293
  if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'date') {
@@ -297,11 +297,11 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
297
297
  }
298
298
  if (repeating) {
299
299
  if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id] = [];
300
- if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].includes(formated)) refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].push(formated);
300
+ if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].includes(formatted)) refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].push(formatted);
301
301
  }
302
302
  if (value !== null && value !== void 0 && (_value$repeat1 = value.repeat) !== null && _value$repeat1 !== void 0 && (_value$repeat1 = _value$repeat1.ends) !== null && _value$repeat1 !== void 0 && _value$repeat1.active) {
303
303
  var _refs$repeatCount$cur;
304
- const indexRepeated = (_refs$repeatCount$cur = refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) === null || _refs$repeatCount$cur === void 0 ? void 0 : _refs$repeatCount$cur.indexOf(formated);
304
+ const indexRepeated = (_refs$repeatCount$cur = refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) === null || _refs$repeatCount$cur === void 0 ? void 0 : _refs$repeatCount$cur.indexOf(formatted);
305
305
 
306
306
  // count
307
307
  if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'count') repeating = repeating && (value === null || value === void 0 ? void 0 : value.repeat.ends.value) >= (indexRepeated === -1 ? 0 : indexRepeated) + 1;
package/CalendarMonth/CalendarMonth.js CHANGED
@@ -374,7 +374,6 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
374
374
  };
375
375
  return values[order_];
376
376
  };
377
- const days = [];
378
377
  const monthNow = new _date.OnesyDate();
379
378
 
380
379
  // value or value range selected value
@@ -484,68 +483,69 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
484
483
  result.outside = true;
485
484
  return result;
486
485
  }, [value, selected, rangesSelected, rangesValue]);
487
- let isMonthFrom = false;
488
- let isMonthTo = false;
486
+ const days = _react.default.useMemo(() => {
487
+ const items = [];
489
488
 
490
- // Add all month days
491
- for (let i = 0; i < month.daysInMonth; i++) {
492
- let day = (0, _date.set)(i + 1, 'day', month);
493
- day = (0, _date.set)(14, 'hour', day);
494
- const details = getDetails(day);
495
- if (details.selectedIndex === 0) isMonthFrom = true;else if (details.selectedIndex === 1) isMonthTo = true;
496
- days.push({
497
- value: i + 1,
498
- in: true,
499
- dayWeek: day.dayWeek,
500
- weekend: [0, 6].includes(day.dayWeek),
501
- today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
502
- is: _objectSpread({}, details),
503
- onesyDate: day
504
- });
505
- }
506
- days[0].start = true;
507
- days[days.length - 1].end = true;
508
-
509
- // Add to start
510
- if (weekStartDay === 'Sunday' && monthStart.dayWeek !== 0 || weekStartDay === 'Monday' && monthStart.dayWeek !== 1) {
511
- let toAdd = monthStart.dayWeek === 0 ? 6 : monthStart.dayWeek - 1;
512
- if (weekStartDay === 'Sunday') toAdd++;
513
- for (let i = 0; i < toAdd; i++) {
514
- const day = (0, _date.set)(previousMonthEnd.day - i, 'day', previousMonth);
489
+ // Add all month days
490
+ for (let i = 0; i < month.daysInMonth; i++) {
491
+ let day = (0, _date.set)(i + 1, 'day', month);
492
+ day = (0, _date.set)(14, 'hour', day);
515
493
  const details = getDetails(day);
516
- days.unshift({
517
- value: day.day,
518
- in: false,
494
+ items.push({
495
+ value: i + 1,
496
+ in: true,
519
497
  dayWeek: day.dayWeek,
520
498
  weekend: [0, 6].includes(day.dayWeek),
521
499
  today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
522
500
  is: _objectSpread({}, details),
523
- start: true,
524
501
  onesyDate: day
525
502
  });
526
503
  }
527
- }
504
+ items[0].start = true;
505
+ items[items.length - 1].end = true;
528
506
 
529
- // Add to end
530
- const dayLast = days[days.length - 1];
531
- if (dayLast.dayWeek < 7) {
532
- let toAdd = 7 - dayLast.dayWeek;
533
- if (days.length + toAdd - 1 < 42) toAdd += 41 - (days.length + toAdd - 1);
534
- for (let i = 0; i < toAdd; i++) {
535
- const day = (0, _date.set)(i + 1, 'day', nextMonth);
536
- const details = getDetails(day);
537
- days.push({
538
- value: i + 1,
539
- in: false,
540
- dayWeek: day.dayWeek,
541
- weekend: [0, 6].includes(day.dayWeek),
542
- today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
543
- is: _objectSpread({}, details),
544
- end: true,
545
- onesyDate: day
546
- });
507
+ // Add to start
508
+ if (weekStartDay === 'Sunday' && monthStart.dayWeek !== 0 || weekStartDay === 'Monday' && monthStart.dayWeek !== 1) {
509
+ let toAdd = monthStart.dayWeek === 0 ? 6 : monthStart.dayWeek - 1;
510
+ if (weekStartDay === 'Sunday') toAdd++;
511
+ for (let i = 0; i < toAdd; i++) {
512
+ const day = (0, _date.set)(previousMonthEnd.day - i, 'day', previousMonth);
513
+ const details = getDetails(day);
514
+ items.unshift({
515
+ value: day.day,
516
+ in: false,
517
+ dayWeek: day.dayWeek,
518
+ weekend: [0, 6].includes(day.dayWeek),
519
+ today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
520
+ is: _objectSpread({}, details),
521
+ start: true,
522
+ onesyDate: day
523
+ });
524
+ }
547
525
  }
548
- }
526
+
527
+ // Add to end
528
+ const dayLast = items[items.length - 1];
529
+ if (dayLast.dayWeek < 7) {
530
+ let toAdd = 7 - dayLast.dayWeek;
531
+ if (items.length + toAdd - 1 < 42) toAdd += 41 - (items.length + toAdd - 1);
532
+ for (let i = 0; i < toAdd; i++) {
533
+ const day = (0, _date.set)(i + 1, 'day', nextMonth);
534
+ const details = getDetails(day);
535
+ items.push({
536
+ value: i + 1,
537
+ in: false,
538
+ dayWeek: day.dayWeek,
539
+ weekend: [0, 6].includes(day.dayWeek),
540
+ today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
541
+ is: _objectSpread({}, details),
542
+ end: true,
543
+ onesyDate: day
544
+ });
545
+ }
546
+ }
547
+ return items;
548
+ }, [month, getDetails]);
549
549
  const colorSelectedTheme = _react.default.useMemo(() => {
550
550
  return theme.palette.color[colorSelected] || theme.methods.color(colorSelected);
551
551
  }, [colorSelected, theme]);
@@ -646,10 +646,6 @@ const CalendarMonth = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
646
646
  gap: 0,
647
647
  direction: "column",
648
648
  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, noTransition ? classes.root : classes.root_transition, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
649
- }, isMonthFrom && {
650
- 'data-month-from': true
651
- }, isMonthTo && {
652
- 'data-month-to': true
653
649
  }, other), labels && /*#__PURE__*/_react.default.createElement(Line, {
654
650
  gap: 0,
655
651
  direction: "row",
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/CalendarMenu/CalendarMenu.js CHANGED
@@ -242,7 +242,7 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
242
242
  }
243
243
  if (value?.repeat?.skip_weekends && [0, 6].includes(day.dayWeek)) repeating = false;
244
244
  if (repeating) {
245
- const formated = format(day, formats.date);
245
+ const formatted = format(day, formats.date);
246
246
  if (value?.repeat?.ends?.active) {
247
247
  // date
248
248
  if (value?.repeat.ends.version === 'date') {
@@ -252,10 +252,10 @@ const CalendarMenu = /*#__PURE__*/React.forwardRef((props_, ref) => {
252
252
  }
253
253
  if (repeating) {
254
254
  if (!refs.repeatCount.current[value?.id]) refs.repeatCount.current[value?.id] = [];
255
- if (!refs.repeatCount.current[value?.id].includes(formated)) refs.repeatCount.current[value?.id].push(formated);
255
+ if (!refs.repeatCount.current[value?.id].includes(formatted)) refs.repeatCount.current[value?.id].push(formatted);
256
256
  }
257
257
  if (value?.repeat?.ends?.active) {
258
- const indexRepeated = refs.repeatCount.current[value?.id]?.indexOf(formated);
258
+ const indexRepeated = refs.repeatCount.current[value?.id]?.indexOf(formatted);
259
259
 
260
260
  // count
261
261
  if (value?.repeat.ends.version === 'count') repeating = repeating && value?.repeat.ends.value >= (indexRepeated === -1 ? 0 : indexRepeated) + 1;
package/esm/CalendarMonth/CalendarMonth.js CHANGED
@@ -343,7 +343,6 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
343
343
  };
344
344
  return values[order_];
345
345
  };
346
- const days = [];
347
346
  const monthNow = new OnesyDate();
348
347
 
349
348
  // value or value range selected value
@@ -453,68 +452,69 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
453
452
  result.outside = true;
454
453
  return result;
455
454
  }, [value, selected, rangesSelected, rangesValue]);
456
- let isMonthFrom = false;
457
- let isMonthTo = false;
455
+ const days = React.useMemo(() => {
456
+ const items = [];
458
457
 
459
- // Add all month days
460
- for (let i = 0; i < month.daysInMonth; i++) {
461
- let day = set(i + 1, 'day', month);
462
- day = set(14, 'hour', day);
463
- const details = getDetails(day);
464
- if (details.selectedIndex === 0) isMonthFrom = true;else if (details.selectedIndex === 1) isMonthTo = true;
465
- days.push({
466
- value: i + 1,
467
- in: true,
468
- dayWeek: day.dayWeek,
469
- weekend: [0, 6].includes(day.dayWeek),
470
- today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
471
- is: _objectSpread({}, details),
472
- onesyDate: day
473
- });
474
- }
475
- days[0].start = true;
476
- days[days.length - 1].end = true;
477
-
478
- // Add to start
479
- if (weekStartDay === 'Sunday' && monthStart.dayWeek !== 0 || weekStartDay === 'Monday' && monthStart.dayWeek !== 1) {
480
- let toAdd = monthStart.dayWeek === 0 ? 6 : monthStart.dayWeek - 1;
481
- if (weekStartDay === 'Sunday') toAdd++;
482
- for (let i = 0; i < toAdd; i++) {
483
- const day = set(previousMonthEnd.day - i, 'day', previousMonth);
458
+ // Add all month days
459
+ for (let i = 0; i < month.daysInMonth; i++) {
460
+ let day = set(i + 1, 'day', month);
461
+ day = set(14, 'hour', day);
484
462
  const details = getDetails(day);
485
- days.unshift({
486
- value: day.day,
487
- in: false,
463
+ items.push({
464
+ value: i + 1,
465
+ in: true,
488
466
  dayWeek: day.dayWeek,
489
467
  weekend: [0, 6].includes(day.dayWeek),
490
468
  today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
491
469
  is: _objectSpread({}, details),
492
- start: true,
493
470
  onesyDate: day
494
471
  });
495
472
  }
496
- }
473
+ items[0].start = true;
474
+ items[items.length - 1].end = true;
497
475
 
498
- // Add to end
499
- const dayLast = days[days.length - 1];
500
- if (dayLast.dayWeek < 7) {
501
- let toAdd = 7 - dayLast.dayWeek;
502
- if (days.length + toAdd - 1 < 42) toAdd += 41 - (days.length + toAdd - 1);
503
- for (let i = 0; i < toAdd; i++) {
504
- const day = set(i + 1, 'day', nextMonth);
505
- const details = getDetails(day);
506
- days.push({
507
- value: i + 1,
508
- in: false,
509
- dayWeek: day.dayWeek,
510
- weekend: [0, 6].includes(day.dayWeek),
511
- today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
512
- is: _objectSpread({}, details),
513
- end: true,
514
- onesyDate: day
515
- });
476
+ // Add to start
477
+ if (weekStartDay === 'Sunday' && monthStart.dayWeek !== 0 || weekStartDay === 'Monday' && monthStart.dayWeek !== 1) {
478
+ let toAdd = monthStart.dayWeek === 0 ? 6 : monthStart.dayWeek - 1;
479
+ if (weekStartDay === 'Sunday') toAdd++;
480
+ for (let i = 0; i < toAdd; i++) {
481
+ const day = set(previousMonthEnd.day - i, 'day', previousMonth);
482
+ const details = getDetails(day);
483
+ items.unshift({
484
+ value: day.day,
485
+ in: false,
486
+ dayWeek: day.dayWeek,
487
+ weekend: [0, 6].includes(day.dayWeek),
488
+ today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
489
+ is: _objectSpread({}, details),
490
+ start: true,
491
+ onesyDate: day
492
+ });
493
+ }
516
494
  }
517
- }
495
+
496
+ // Add to end
497
+ const dayLast = items[items.length - 1];
498
+ if (dayLast.dayWeek < 7) {
499
+ let toAdd = 7 - dayLast.dayWeek;
500
+ if (items.length + toAdd - 1 < 42) toAdd += 41 - (items.length + toAdd - 1);
501
+ for (let i = 0; i < toAdd; i++) {
502
+ const day = set(i + 1, 'day', nextMonth);
503
+ const details = getDetails(day);
504
+ items.push({
505
+ value: i + 1,
506
+ in: false,
507
+ dayWeek: day.dayWeek,
508
+ weekend: [0, 6].includes(day.dayWeek),
509
+ today: day.year === monthNow.year && day.dayYear === monthNow.dayYear,
510
+ is: _objectSpread({}, details),
511
+ end: true,
512
+ onesyDate: day
513
+ });
514
+ }
515
+ }
516
+ return items;
517
+ }, [month, getDetails]);
518
518
  const colorSelectedTheme = React.useMemo(() => {
519
519
  return theme.palette.color[colorSelected] || theme.methods.color(colorSelected);
520
520
  }, [colorSelected, theme]);
@@ -614,10 +614,6 @@ const CalendarMonth = /*#__PURE__*/React.forwardRef((props__, ref) => {
614
614
  gap: 0,
615
615
  direction: "column",
616
616
  className: classNames([staticClassName('CalendarMonth', theme) && ['onesy-CalendarMonth-root', `onesy-CalendarMonth-size-${size}`], className, noTransition ? classes.root : classes.root_transition, classes[`size_${size}`], classes[`move_${refs.move.current}`], !labels && classes.root_no_labels, disabled && classes.disabled])
617
- }, isMonthFrom && {
618
- 'data-month-from': true
619
- }, isMonthTo && {
620
- 'data-month-to': true
621
617
  }, other), labels && /*#__PURE__*/React.createElement(Line, {
622
618
  gap: 0,
623
619
  direction: "row",
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.156
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.156
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.157",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar Erić <lazareric1@proton.me>",