baseui 0.0.0-next-e8a4bad → 0.0.0-next-828aa37

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 (24) hide show
  1. package/breadcrumbs/styled-components.js +2 -1
  2. package/es/breadcrumbs/styled-components.js +2 -1
  3. package/es/input/base-input.js +8 -12
  4. package/es/input/input.js +9 -13
  5. package/es/textarea/textarea.js +9 -13
  6. package/es/themes/dark-theme/color-component-tokens.js +1 -1
  7. package/es/themes/light-theme/color-component-tokens.js +1 -1
  8. package/esm/breadcrumbs/styled-components.js +2 -1
  9. package/esm/input/base-input.js +8 -12
  10. package/esm/input/input.js +9 -13
  11. package/esm/textarea/textarea.js +9 -13
  12. package/esm/themes/dark-theme/color-component-tokens.js +1 -1
  13. package/esm/themes/light-theme/color-component-tokens.js +1 -1
  14. package/input/base-input.js +8 -12
  15. package/input/base-input.js.flow +4 -8
  16. package/input/input.js +9 -13
  17. package/input/input.js.flow +5 -9
  18. package/package.json +1 -1
  19. package/textarea/textarea.js +9 -13
  20. package/textarea/textarea.js.flow +5 -9
  21. package/themes/dark-theme/color-component-tokens.js +1 -1
  22. package/themes/dark-theme/color-component-tokens.js.flow +1 -1
  23. package/themes/light-theme/color-component-tokens.js +1 -1
  24. package/themes/light-theme/color-component-tokens.js.flow +1 -1
package/breadcrumbs/styled-components.js CHANGED
@@ -45,7 +45,8 @@ StyledListItem.displayName = 'StyledListItem';
45
45
  var StyledSeparator = (0, _styles.styled)('div', function (_ref4) {
46
46
  var $theme = _ref4.$theme;
47
47
  return {
48
- display: 'inline-block',
48
+ display: 'inline-flex',
49
+ alignItems: 'center',
49
50
  color: $theme.colors.breadcrumbsSeparatorFill,
50
51
  marginLeft: $theme.sizing.scale300,
51
52
  marginRight: $theme.sizing.scale300,
package/es/breadcrumbs/styled-components.js CHANGED
@@ -41,7 +41,8 @@ export const StyledSeparator = styled('div', ({
41
41
  $theme
42
42
  }) => {
43
43
  return {
44
- display: 'inline-block',
44
+ display: 'inline-flex',
45
+ alignItems: 'center',
45
46
  color: $theme.colors.breadcrumbsSeparatorFill,
46
47
  marginLeft: $theme.sizing.scale300,
47
48
  marginRight: $theme.sizing.scale300,
package/es/input/base-input.js CHANGED
@@ -52,21 +52,17 @@ class BaseInput extends React.Component {
52
52
  });
53
53
 
54
54
  _defineProperty(this, "onFocus", e => {
55
- if (!this.props.readOnly) {
56
- this.setState({
57
- isFocused: true
58
- });
59
- this.props.onFocus(e);
60
- }
55
+ this.setState({
56
+ isFocused: true
57
+ });
58
+ this.props.onFocus(e);
61
59
  });
62
60
 
63
61
  _defineProperty(this, "onBlur", e => {
64
- if (!this.props.readOnly) {
65
- this.setState({
66
- isFocused: false
67
- });
68
- this.props.onBlur(e);
69
- }
62
+ this.setState({
63
+ isFocused: false
64
+ });
65
+ this.props.onBlur(e);
70
66
  });
71
67
 
72
68
  _defineProperty(this, "handleFocusForMaskToggle", event => {
package/es/input/input.js CHANGED
@@ -20,25 +20,21 @@ class Input extends React.Component {
20
20
  super(...args);
21
21
 
22
22
  _defineProperty(this, "state", {
23
- isFocused: this.props.autoFocus && !this.props.readOnly || false
23
+ isFocused: this.props.autoFocus || false
24
24
  });
25
25
 
26
26
  _defineProperty(this, "onFocus", e => {
27
- if (!this.props.readOnly) {
28
- this.setState({
29
- isFocused: true
30
- });
31
- this.props.onFocus(e);
32
- }
27
+ this.setState({
28
+ isFocused: true
29
+ });
30
+ this.props.onFocus(e);
33
31
  });
34
32
 
35
33
  _defineProperty(this, "onBlur", e => {
36
- if (!this.props.readOnly) {
37
- this.setState({
38
- isFocused: false
39
- });
40
- this.props.onBlur(e);
41
- }
34
+ this.setState({
35
+ isFocused: false
36
+ });
37
+ this.props.onBlur(e);
42
38
  });
43
39
  }
44
40
 
package/es/textarea/textarea.js CHANGED
@@ -18,25 +18,21 @@ class Textarea extends React.Component {
18
18
  super(...args);
19
19
 
20
20
  _defineProperty(this, "state", {
21
- isFocused: this.props.autoFocus && !this.props.readOnly || false
21
+ isFocused: this.props.autoFocus || false
22
22
  });
23
23
 
24
24
  _defineProperty(this, "onFocus", e => {
25
- if (!this.props.readOnly) {
26
- this.setState({
27
- isFocused: true
28
- });
29
- this.props.onFocus(e);
30
- }
25
+ this.setState({
26
+ isFocused: true
27
+ });
28
+ this.props.onFocus(e);
31
29
  });
32
30
 
33
31
  _defineProperty(this, "onBlur", e => {
34
- if (!this.props.readOnly) {
35
- this.setState({
36
- isFocused: false
37
- });
38
- this.props.onBlur(e);
39
- }
32
+ this.setState({
33
+ isFocused: false
34
+ });
35
+ this.props.onBlur(e);
40
36
  });
41
37
  }
42
38
 
package/es/themes/dark-theme/color-component-tokens.js CHANGED
@@ -55,7 +55,7 @@ export default ((themePrimitives = colorTokens) => ({
55
55
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
56
56
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
57
57
  // Breadcrumbs
58
- breadcrumbsText: themePrimitives.mono100,
58
+ breadcrumbsText: themePrimitives.white,
59
59
  breadcrumbsSeparatorFill: themePrimitives.mono200,
60
60
  // Datepicker
61
61
  calendarBackground: themePrimitives.mono800,
package/es/themes/light-theme/color-component-tokens.js CHANGED
@@ -55,7 +55,7 @@ export default ((themePrimitives = colorTokens) => ({
55
55
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
56
56
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
57
57
  // Breadcrumbs
58
- breadcrumbsText: themePrimitives.mono900,
58
+ breadcrumbsText: themePrimitives.black,
59
59
  breadcrumbsSeparatorFill: themePrimitives.mono700,
60
60
  // Datepicker
61
61
  calendarBackground: themePrimitives.mono100,
package/esm/breadcrumbs/styled-components.js CHANGED
@@ -40,7 +40,8 @@ StyledListItem.displayName = 'StyledListItem';
40
40
  export var StyledSeparator = styled('div', function (_ref4) {
41
41
  var $theme = _ref4.$theme;
42
42
  return {
43
- display: 'inline-block',
43
+ display: 'inline-flex',
44
+ alignItems: 'center',
44
45
  color: $theme.colors.breadcrumbsSeparatorFill,
45
46
  marginLeft: $theme.sizing.scale300,
46
47
  marginRight: $theme.sizing.scale300,
package/esm/input/base-input.js CHANGED
@@ -101,23 +101,19 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
101
101
  });
102
102
 
103
103
  _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
104
- if (!_this.props.readOnly) {
105
- _this.setState({
106
- isFocused: true
107
- });
104
+ _this.setState({
105
+ isFocused: true
106
+ });
108
107
 
109
- _this.props.onFocus(e);
110
- }
108
+ _this.props.onFocus(e);
111
109
  });
112
110
 
113
111
  _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
114
- if (!_this.props.readOnly) {
115
- _this.setState({
116
- isFocused: false
117
- });
112
+ _this.setState({
113
+ isFocused: false
114
+ });
118
115
 
119
- _this.props.onBlur(e);
120
- }
116
+ _this.props.onBlur(e);
121
117
  });
122
118
 
123
119
  _defineProperty(_assertThisInitialized(_this), "handleFocusForMaskToggle", function (event) {
package/esm/input/input.js CHANGED
@@ -73,27 +73,23 @@ var Input = /*#__PURE__*/function (_React$Component) {
73
73
  _this = _super.call.apply(_super, [this].concat(args));
74
74
 
75
75
  _defineProperty(_assertThisInitialized(_this), "state", {
76
- isFocused: _this.props.autoFocus && !_this.props.readOnly || false
76
+ isFocused: _this.props.autoFocus || false
77
77
  });
78
78
 
79
79
  _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
80
- if (!_this.props.readOnly) {
81
- _this.setState({
82
- isFocused: true
83
- });
80
+ _this.setState({
81
+ isFocused: true
82
+ });
84
83
 
85
- _this.props.onFocus(e);
86
- }
84
+ _this.props.onFocus(e);
87
85
  });
88
86
 
89
87
  _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
90
- if (!_this.props.readOnly) {
91
- _this.setState({
92
- isFocused: false
93
- });
88
+ _this.setState({
89
+ isFocused: false
90
+ });
94
91
 
95
- _this.props.onBlur(e);
96
- }
92
+ _this.props.onBlur(e);
97
93
  });
98
94
 
99
95
  return _this;
package/esm/textarea/textarea.js CHANGED
@@ -64,27 +64,23 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
64
64
  _this = _super.call.apply(_super, [this].concat(args));
65
65
 
66
66
  _defineProperty(_assertThisInitialized(_this), "state", {
67
- isFocused: _this.props.autoFocus && !_this.props.readOnly || false
67
+ isFocused: _this.props.autoFocus || false
68
68
  });
69
69
 
70
70
  _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
71
- if (!_this.props.readOnly) {
72
- _this.setState({
73
- isFocused: true
74
- });
71
+ _this.setState({
72
+ isFocused: true
73
+ });
75
74
 
76
- _this.props.onFocus(e);
77
- }
75
+ _this.props.onFocus(e);
78
76
  });
79
77
 
80
78
  _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
81
- if (!_this.props.readOnly) {
82
- _this.setState({
83
- isFocused: false
84
- });
79
+ _this.setState({
80
+ isFocused: false
81
+ });
85
82
 
86
- _this.props.onBlur(e);
87
- }
83
+ _this.props.onBlur(e);
88
84
  });
89
85
 
90
86
  return _this;
package/esm/themes/dark-theme/color-component-tokens.js CHANGED
@@ -57,7 +57,7 @@ export default (function () {
57
57
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
58
58
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
59
59
  // Breadcrumbs
60
- breadcrumbsText: themePrimitives.mono100,
60
+ breadcrumbsText: themePrimitives.white,
61
61
  breadcrumbsSeparatorFill: themePrimitives.mono200,
62
62
  // Datepicker
63
63
  calendarBackground: themePrimitives.mono800,
package/esm/themes/light-theme/color-component-tokens.js CHANGED
@@ -57,7 +57,7 @@ export default (function () {
57
57
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
58
58
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
59
59
  // Breadcrumbs
60
- breadcrumbsText: themePrimitives.mono900,
60
+ breadcrumbsText: themePrimitives.black,
61
61
  breadcrumbsSeparatorFill: themePrimitives.mono700,
62
62
  // Datepicker
63
63
  calendarBackground: themePrimitives.mono100,
package/input/base-input.js CHANGED
@@ -113,23 +113,19 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
113
113
  });
114
114
 
115
115
  _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
116
- if (!_this.props.readOnly) {
117
- _this.setState({
118
- isFocused: true
119
- });
116
+ _this.setState({
117
+ isFocused: true
118
+ });
120
119
 
121
- _this.props.onFocus(e);
122
- }
120
+ _this.props.onFocus(e);
123
121
  });
124
122
 
125
123
  _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
126
- if (!_this.props.readOnly) {
127
- _this.setState({
128
- isFocused: false
129
- });
124
+ _this.setState({
125
+ isFocused: false
126
+ });
130
127
 
131
- _this.props.onBlur(e);
132
- }
128
+ _this.props.onBlur(e);
133
129
  });
134
130
 
135
131
  _defineProperty(_assertThisInitialized(_this), "handleFocusForMaskToggle", function (event) {
package/input/base-input.js.flow CHANGED
@@ -137,17 +137,13 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
137
137
  };
138
138
 
139
139
  onFocus = (e: SyntheticFocusEvent<T>) => {
140
- if (!this.props.readOnly) {
141
- this.setState({ isFocused: true });
142
- this.props.onFocus(e);
143
- }
140
+ this.setState({ isFocused: true });
141
+ this.props.onFocus(e);
144
142
  };
145
143
 
146
144
  onBlur = (e: SyntheticFocusEvent<T>) => {
147
- if (!this.props.readOnly) {
148
- this.setState({ isFocused: false });
149
- this.props.onBlur(e);
150
- }
145
+ this.setState({ isFocused: false });
146
+ this.props.onBlur(e);
151
147
  };
152
148
 
153
149
  getInputType() {
package/input/input.js CHANGED
@@ -93,27 +93,23 @@ var Input = /*#__PURE__*/function (_React$Component) {
93
93
  _this = _super.call.apply(_super, [this].concat(args));
94
94
 
95
95
  _defineProperty(_assertThisInitialized(_this), "state", {
96
- isFocused: _this.props.autoFocus && !_this.props.readOnly || false
96
+ isFocused: _this.props.autoFocus || false
97
97
  });
98
98
 
99
99
  _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
100
- if (!_this.props.readOnly) {
101
- _this.setState({
102
- isFocused: true
103
- });
100
+ _this.setState({
101
+ isFocused: true
102
+ });
104
103
 
105
- _this.props.onFocus(e);
106
- }
104
+ _this.props.onFocus(e);
107
105
  });
108
106
 
109
107
  _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
110
- if (!_this.props.readOnly) {
111
- _this.setState({
112
- isFocused: false
113
- });
108
+ _this.setState({
109
+ isFocused: false
110
+ });
114
111
 
115
- _this.props.onBlur(e);
116
- }
112
+ _this.props.onBlur(e);
117
113
  });
118
114
 
119
115
  return _this;
package/input/input.js.flow CHANGED
@@ -36,21 +36,17 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
36
36
  * customers shouldn't have to manage themselves, such as input's focus state.
37
37
  */
38
38
  state = {
39
- isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
39
+ isFocused: this.props.autoFocus || false,
40
40
  };
41
41
 
42
42
  onFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
43
- if (!this.props.readOnly) {
44
- this.setState({ isFocused: true });
45
- this.props.onFocus(e);
46
- }
43
+ this.setState({ isFocused: true });
44
+ this.props.onFocus(e);
47
45
  };
48
46
 
49
47
  onBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
50
- if (!this.props.readOnly) {
51
- this.setState({ isFocused: false });
52
- this.props.onBlur(e);
53
- }
48
+ this.setState({ isFocused: false });
49
+ this.props.onBlur(e);
54
50
  };
55
51
 
56
52
  render() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "0.0.0-next-e8a4bad",
3
+ "version": "0.0.0-next-828aa37",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/textarea/textarea.js CHANGED
@@ -72,27 +72,23 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
72
72
  _this = _super.call.apply(_super, [this].concat(args));
73
73
 
74
74
  _defineProperty(_assertThisInitialized(_this), "state", {
75
- isFocused: _this.props.autoFocus && !_this.props.readOnly || false
75
+ isFocused: _this.props.autoFocus || false
76
76
  });
77
77
 
78
78
  _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
79
- if (!_this.props.readOnly) {
80
- _this.setState({
81
- isFocused: true
82
- });
79
+ _this.setState({
80
+ isFocused: true
81
+ });
83
82
 
84
- _this.props.onFocus(e);
85
- }
83
+ _this.props.onFocus(e);
86
84
  });
87
85
 
88
86
  _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
89
- if (!_this.props.readOnly) {
90
- _this.setState({
91
- isFocused: false
92
- });
87
+ _this.setState({
88
+ isFocused: false
89
+ });
93
90
 
94
- _this.props.onBlur(e);
95
- }
91
+ _this.props.onBlur(e);
96
92
  });
97
93
 
98
94
  return _this;
package/textarea/textarea.js.flow CHANGED
@@ -36,21 +36,17 @@ class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
36
36
  };
37
37
 
38
38
  state = {
39
- isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
39
+ isFocused: this.props.autoFocus || false,
40
40
  };
41
41
 
42
42
  onFocus = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
43
- if (!this.props.readOnly) {
44
- this.setState({ isFocused: true });
45
- this.props.onFocus(e);
46
- }
43
+ this.setState({ isFocused: true });
44
+ this.props.onFocus(e);
47
45
  };
48
46
 
49
47
  onBlur = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
50
- if (!this.props.readOnly) {
51
- this.setState({ isFocused: false });
52
- this.props.onBlur(e);
53
- }
48
+ this.setState({ isFocused: false });
49
+ this.props.onBlur(e);
54
50
  };
55
51
 
56
52
  render() {
package/themes/dark-theme/color-component-tokens.js CHANGED
@@ -67,7 +67,7 @@ var _default = function _default() {
67
67
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
68
68
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
69
69
  // Breadcrumbs
70
- breadcrumbsText: themePrimitives.mono100,
70
+ breadcrumbsText: themePrimitives.white,
71
71
  breadcrumbsSeparatorFill: themePrimitives.mono200,
72
72
  // Datepicker
73
73
  calendarBackground: themePrimitives.mono800,
package/themes/dark-theme/color-component-tokens.js.flow CHANGED
@@ -63,7 +63,7 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
63
63
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
64
64
 
65
65
  // Breadcrumbs
66
- breadcrumbsText: themePrimitives.mono100,
66
+ breadcrumbsText: themePrimitives.white,
67
67
  breadcrumbsSeparatorFill: themePrimitives.mono200,
68
68
 
69
69
  // Datepicker
package/themes/light-theme/color-component-tokens.js CHANGED
@@ -67,7 +67,7 @@ var _default = function _default() {
67
67
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
68
68
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
69
69
  // Breadcrumbs
70
- breadcrumbsText: themePrimitives.mono900,
70
+ breadcrumbsText: themePrimitives.black,
71
71
  breadcrumbsSeparatorFill: themePrimitives.mono700,
72
72
  // Datepicker
73
73
  calendarBackground: themePrimitives.mono100,
package/themes/light-theme/color-component-tokens.js.flow CHANGED
@@ -63,7 +63,7 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
63
63
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
64
64
 
65
65
  // Breadcrumbs
66
- breadcrumbsText: themePrimitives.mono900,
66
+ breadcrumbsText: themePrimitives.black,
67
67
  breadcrumbsSeparatorFill: themePrimitives.mono700,
68
68
 
69
69
  // Datepicker