baseui 10.2.1 → 10.3.0

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 (21) hide show
  1. package/es/select/select-component.js +1 -1
  2. package/es/themes/dark-theme/color-semantic-tokens.js +8 -7
  3. package/es/themes/light-theme/color-semantic-tokens.js +3 -2
  4. package/es/tokens/colors.js +2 -2
  5. package/esm/select/select-component.js +1 -1
  6. package/esm/themes/dark-theme/color-semantic-tokens.js +8 -7
  7. package/esm/themes/light-theme/color-semantic-tokens.js +3 -2
  8. package/esm/tokens/colors.js +2 -2
  9. package/index.d.ts +1 -0
  10. package/package.json +1 -1
  11. package/select/select-component.js +1 -1
  12. package/select/select-component.js.flow +1 -1
  13. package/table-semantic/index.d.ts +1 -0
  14. package/theme.ts +2 -0
  15. package/themes/dark-theme/color-semantic-tokens.js +8 -7
  16. package/themes/dark-theme/color-semantic-tokens.js.flow +7 -6
  17. package/themes/light-theme/color-semantic-tokens.js +3 -2
  18. package/themes/light-theme/color-semantic-tokens.js.flow +2 -1
  19. package/themes/types.js.flow +1 -0
  20. package/tokens/colors.js +2 -2
  21. package/tokens/colors.js.flow +2 -2
package/es/select/select-component.js CHANGED
@@ -845,7 +845,7 @@ class Select extends React.Component {
845
845
  }
846
846
 
847
847
  filterOptions(excludeOptions) {
848
- const filterValue = this.state.inputValue; // apply filter function
848
+ const filterValue = this.state.inputValue.trim(); // apply filter function
849
849
 
850
850
  if (this.props.filterOptions) {
851
851
  this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
package/es/themes/dark-theme/color-semantic-tokens.js CHANGED
@@ -17,12 +17,12 @@ foundation = colorTokens) => {
17
17
  backgroundInversePrimary: foundation.primaryA,
18
18
  backgroundInverseSecondary: colors.gray300,
19
19
  // Content
20
- contentPrimary: foundation.primaryA,
21
- contentSecondary: colors.gray400,
22
- contentTertiary: colors.gray500,
23
- contentInversePrimary: foundation.primaryB,
24
- contentInverseSecondary: colors.gray600,
25
- contentInverseTertiary: colors.gray500,
20
+ contentPrimary: colors.white,
21
+ contentSecondary: colors.gray300,
22
+ contentTertiary: colors.gray400,
23
+ contentInversePrimary: colors.black,
24
+ contentInverseSecondary: colors.gray700,
25
+ contentInverseTertiary: colors.gray600,
26
26
  // Border
27
27
  borderOpaque: colors.gray700,
28
28
  borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
@@ -69,7 +69,8 @@ foundation = colorTokens) => {
69
69
  rewardsTier1: colors.blue400,
70
70
  rewardsTier2: colors.yellow400,
71
71
  rewardsTier3: colors.platinum400,
72
- rewardsTier4: colors.gray200
72
+ rewardsTier4: colors.gray200,
73
+ membership: colors.yellow600
73
74
  };
74
75
  return { ...core,
75
76
  ...coreExtensions
package/es/themes/light-theme/color-semantic-tokens.js CHANGED
@@ -52,7 +52,7 @@ foundation = colorTokens) => {
52
52
  contentOnColor: colors.white,
53
53
  contentOnColorInverse: colors.black,
54
54
  contentNegative: foundation.negative,
55
- contentWarning: colors.yellow700,
55
+ contentWarning: colors.yellow600,
56
56
  contentPositive: colors.green400,
57
57
  // Border
58
58
  borderStateDisabled: colors.gray50,
@@ -69,7 +69,8 @@ foundation = colorTokens) => {
69
69
  rewardsTier1: colors.blue400,
70
70
  rewardsTier2: colors.yellow400,
71
71
  rewardsTier3: colors.platinum400,
72
- rewardsTier4: colors.black
72
+ rewardsTier4: colors.black,
73
+ membership: colors.yellow600
73
74
  };
74
75
  return { ...core,
75
76
  ...coreExtensions
package/es/tokens/colors.js CHANGED
@@ -11,7 +11,7 @@ const colors = {
11
11
  gray200: '#E2E2E2',
12
12
  gray300: '#CBCBCB',
13
13
  gray400: '#AFAFAF',
14
- gray500: '#757575',
14
+ gray500: '#6B6B6B',
15
15
  gray600: '#545454',
16
16
  gray700: '#333333',
17
17
  gray800: '#1F1F1F',
@@ -48,7 +48,7 @@ const colors = {
48
48
  yellow300: '#FFCF70',
49
49
  yellow400: '#FFC043',
50
50
  yellow500: '#BC8B2C',
51
- yellow600: '#997328',
51
+ yellow600: '#996F00',
52
52
  yellow700: '#674D1B',
53
53
  green50: '#E6F2ED',
54
54
  green100: '#ADDEC9',
package/esm/select/select-component.js CHANGED
@@ -992,7 +992,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
992
992
  value: function filterOptions(excludeOptions) {
993
993
  var _this5 = this;
994
994
 
995
- var filterValue = this.state.inputValue; // apply filter function
995
+ var filterValue = this.state.inputValue.trim(); // apply filter function
996
996
 
997
997
  if (this.props.filterOptions) {
998
998
  this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
package/esm/themes/dark-theme/color-semantic-tokens.js CHANGED
@@ -23,12 +23,12 @@ export default (function () {
23
23
  backgroundInversePrimary: foundation.primaryA,
24
24
  backgroundInverseSecondary: colors.gray300,
25
25
  // Content
26
- contentPrimary: foundation.primaryA,
27
- contentSecondary: colors.gray400,
28
- contentTertiary: colors.gray500,
29
- contentInversePrimary: foundation.primaryB,
30
- contentInverseSecondary: colors.gray600,
31
- contentInverseTertiary: colors.gray500,
26
+ contentPrimary: colors.white,
27
+ contentSecondary: colors.gray300,
28
+ contentTertiary: colors.gray400,
29
+ contentInversePrimary: colors.black,
30
+ contentInverseSecondary: colors.gray700,
31
+ contentInverseTertiary: colors.gray600,
32
32
  // Border
33
33
  borderOpaque: colors.gray700,
34
34
  borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
@@ -75,7 +75,8 @@ export default (function () {
75
75
  rewardsTier1: colors.blue400,
76
76
  rewardsTier2: colors.yellow400,
77
77
  rewardsTier3: colors.platinum400,
78
- rewardsTier4: colors.gray200
78
+ rewardsTier4: colors.gray200,
79
+ membership: colors.yellow600
79
80
  };
80
81
  return _objectSpread(_objectSpread({}, core), coreExtensions);
81
82
  });
package/esm/themes/light-theme/color-semantic-tokens.js CHANGED
@@ -58,7 +58,7 @@ export default (function () {
58
58
  contentOnColor: colors.white,
59
59
  contentOnColorInverse: colors.black,
60
60
  contentNegative: foundation.negative,
61
- contentWarning: colors.yellow700,
61
+ contentWarning: colors.yellow600,
62
62
  contentPositive: colors.green400,
63
63
  // Border
64
64
  borderStateDisabled: colors.gray50,
@@ -75,7 +75,8 @@ export default (function () {
75
75
  rewardsTier1: colors.blue400,
76
76
  rewardsTier2: colors.yellow400,
77
77
  rewardsTier3: colors.platinum400,
78
- rewardsTier4: colors.black
78
+ rewardsTier4: colors.black,
79
+ membership: colors.yellow600
79
80
  };
80
81
  return _objectSpread(_objectSpread({}, core), coreExtensions);
81
82
  });
package/esm/tokens/colors.js CHANGED
@@ -11,7 +11,7 @@ var colors = {
11
11
  gray200: '#E2E2E2',
12
12
  gray300: '#CBCBCB',
13
13
  gray400: '#AFAFAF',
14
- gray500: '#757575',
14
+ gray500: '#6B6B6B',
15
15
  gray600: '#545454',
16
16
  gray700: '#333333',
17
17
  gray800: '#1F1F1F',
@@ -48,7 +48,7 @@ var colors = {
48
48
  yellow300: '#FFCF70',
49
49
  yellow400: '#FFC043',
50
50
  yellow500: '#BC8B2C',
51
- yellow600: '#997328',
51
+ yellow600: '#996F00',
52
52
  yellow700: '#674D1B',
53
53
  green50: '#E6F2ED',
54
54
  green100: '#ADDEC9',
package/index.d.ts CHANGED
@@ -51,6 +51,7 @@ export function styled<
51
51
  P
52
52
  >;
53
53
 
54
+ export {Theme} from 'baseui/theme';
54
55
  export const LightTheme: Theme;
55
56
  export const LightThemeMove: Theme;
56
57
  export const lightThemePrimitives: ThemePrimitives;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "10.2.1",
3
+ "version": "10.3.0",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/select/select-component.js CHANGED
@@ -1013,7 +1013,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
1013
1013
  value: function filterOptions(excludeOptions) {
1014
1014
  var _this5 = this;
1015
1015
 
1016
- var filterValue = this.state.inputValue; // apply filter function
1016
+ var filterValue = this.state.inputValue.trim(); // apply filter function
1017
1017
 
1018
1018
  if (this.props.filterOptions) {
1019
1019
  this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
package/select/select-component.js.flow CHANGED
@@ -867,7 +867,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
867
867
  }
868
868
 
869
869
  filterOptions(excludeOptions: ?ValueT) {
870
- const filterValue = this.state.inputValue;
870
+ const filterValue = this.state.inputValue.trim();
871
871
  // apply filter function
872
872
  if (this.props.filterOptions) {
873
873
  this.options = this.props.filterOptions(
package/table-semantic/index.d.ts CHANGED
@@ -57,6 +57,7 @@ export interface TableBuilderProps<RowT> {
57
57
  isLoading?: boolean;
58
58
  loadingMessage?: React.ReactNode | (() => React.ReactNode);
59
59
  emptyMessage?: React.ReactNode | (() => React.ReactNode);
60
+ size?: SIZE[keyof SIZE];
60
61
  }
61
62
  export class TableBuilder<RowT> extends React.Component<
62
63
  TableBuilderProps<RowT>
package/theme.ts CHANGED
@@ -195,6 +195,7 @@ export interface Colors {
195
195
  rewardsTier2: string;
196
196
  rewardsTier3: string;
197
197
  rewardsTier4: string;
198
+ membership: string;
198
199
 
199
200
  /* ---- End of Semantic Colors ---- */
200
201
 
@@ -284,6 +285,7 @@ export interface Colors {
284
285
  calendarDayForegroundPseudoSelected: string;
285
286
  calendarDayBackgroundPseudoSelectedHighlighted: string;
286
287
  calendarDayForegroundPseudoSelectedHighlighted: string;
288
+ calendarDayBackgroundSelected: string;
287
289
  calendarDayForegroundSelected: string;
288
290
  calendarDayBackgroundSelectedHighlighted: string;
289
291
  calendarDayForegroundSelectedHighlighted: string;
package/themes/dark-theme/color-semantic-tokens.js CHANGED
@@ -29,12 +29,12 @@ var _default = function _default() {
29
29
  backgroundInversePrimary: foundation.primaryA,
30
30
  backgroundInverseSecondary: _colors.default.gray300,
31
31
  // Content
32
- contentPrimary: foundation.primaryA,
33
- contentSecondary: _colors.default.gray400,
34
- contentTertiary: _colors.default.gray500,
35
- contentInversePrimary: foundation.primaryB,
36
- contentInverseSecondary: _colors.default.gray600,
37
- contentInverseTertiary: _colors.default.gray500,
32
+ contentPrimary: _colors.default.white,
33
+ contentSecondary: _colors.default.gray300,
34
+ contentTertiary: _colors.default.gray400,
35
+ contentInversePrimary: _colors.default.black,
36
+ contentInverseSecondary: _colors.default.gray700,
37
+ contentInverseTertiary: _colors.default.gray600,
38
38
  // Border
39
39
  borderOpaque: _colors.default.gray700,
40
40
  borderTransparent: (0, _util.hexToRgb)(foundation.primaryA, '0.08'),
@@ -81,7 +81,8 @@ var _default = function _default() {
81
81
  rewardsTier1: _colors.default.blue400,
82
82
  rewardsTier2: _colors.default.yellow400,
83
83
  rewardsTier3: _colors.default.platinum400,
84
- rewardsTier4: _colors.default.gray200
84
+ rewardsTier4: _colors.default.gray200,
85
+ membership: _colors.default.yellow600
85
86
  };
86
87
  return _objectSpread(_objectSpread({}, core), coreExtensions);
87
88
  };
package/themes/dark-theme/color-semantic-tokens.js.flow CHANGED
@@ -28,12 +28,12 @@ export default (
28
28
  backgroundInverseSecondary: colors.gray300,
29
29
 
30
30
  // Content
31
- contentPrimary: foundation.primaryA,
32
- contentSecondary: colors.gray400,
33
- contentTertiary: colors.gray500,
34
- contentInversePrimary: foundation.primaryB,
35
- contentInverseSecondary: colors.gray600,
36
- contentInverseTertiary: colors.gray500,
31
+ contentPrimary: colors.white,
32
+ contentSecondary: colors.gray300,
33
+ contentTertiary: colors.gray400,
34
+ contentInversePrimary: colors.black,
35
+ contentInverseSecondary: colors.gray700,
36
+ contentInverseTertiary: colors.gray600,
37
37
 
38
38
  // Border
39
39
  borderOpaque: colors.gray700,
@@ -86,6 +86,7 @@ export default (
86
86
  rewardsTier2: colors.yellow400,
87
87
  rewardsTier3: colors.platinum400,
88
88
  rewardsTier4: colors.gray200,
89
+ membership: colors.yellow600,
89
90
  };
90
91
 
91
92
  return {
package/themes/light-theme/color-semantic-tokens.js CHANGED
@@ -64,7 +64,7 @@ var _default = function _default() {
64
64
  contentOnColor: _colors.default.white,
65
65
  contentOnColorInverse: _colors.default.black,
66
66
  contentNegative: foundation.negative,
67
- contentWarning: _colors.default.yellow700,
67
+ contentWarning: _colors.default.yellow600,
68
68
  contentPositive: _colors.default.green400,
69
69
  // Border
70
70
  borderStateDisabled: _colors.default.gray50,
@@ -81,7 +81,8 @@ var _default = function _default() {
81
81
  rewardsTier1: _colors.default.blue400,
82
82
  rewardsTier2: _colors.default.yellow400,
83
83
  rewardsTier3: _colors.default.platinum400,
84
- rewardsTier4: _colors.default.black
84
+ rewardsTier4: _colors.default.black,
85
+ membership: _colors.default.yellow600
85
86
  };
86
87
  return _objectSpread(_objectSpread({}, core), coreExtensions);
87
88
  };
package/themes/light-theme/color-semantic-tokens.js.flow CHANGED
@@ -66,7 +66,7 @@ export default (
66
66
  contentOnColor: colors.white,
67
67
  contentOnColorInverse: colors.black,
68
68
  contentNegative: foundation.negative,
69
- contentWarning: colors.yellow700,
69
+ contentWarning: colors.yellow600,
70
70
  contentPositive: colors.green400,
71
71
 
72
72
  // Border
@@ -86,6 +86,7 @@ export default (
86
86
  rewardsTier2: colors.yellow400,
87
87
  rewardsTier3: colors.platinum400,
88
88
  rewardsTier4: colors.black,
89
+ membership: colors.yellow600,
89
90
  };
90
91
  return {
91
92
  ...core,
package/themes/types.js.flow CHANGED
@@ -166,6 +166,7 @@ export type CoreExtensionSemanticColorTokensT = {|
166
166
  rewardsTier2: string,
167
167
  rewardsTier3: string,
168
168
  rewardsTier4: string,
169
+ membership: string,
169
170
  |};
170
171
 
171
172
  export type SemanticColorTokensT = {|
package/tokens/colors.js CHANGED
@@ -18,7 +18,7 @@ var colors = {
18
18
  gray200: '#E2E2E2',
19
19
  gray300: '#CBCBCB',
20
20
  gray400: '#AFAFAF',
21
- gray500: '#757575',
21
+ gray500: '#6B6B6B',
22
22
  gray600: '#545454',
23
23
  gray700: '#333333',
24
24
  gray800: '#1F1F1F',
@@ -55,7 +55,7 @@ var colors = {
55
55
  yellow300: '#FFCF70',
56
56
  yellow400: '#FFC043',
57
57
  yellow500: '#BC8B2C',
58
- yellow600: '#997328',
58
+ yellow600: '#996F00',
59
59
  yellow700: '#674D1B',
60
60
  green50: '#E6F2ED',
61
61
  green100: '#ADDEC9',
package/tokens/colors.js.flow CHANGED
@@ -14,7 +14,7 @@ const colors: ColorTokensT = {
14
14
  gray200: '#E2E2E2',
15
15
  gray300: '#CBCBCB',
16
16
  gray400: '#AFAFAF',
17
- gray500: '#757575',
17
+ gray500: '#6B6B6B',
18
18
  gray600: '#545454',
19
19
  gray700: '#333333',
20
20
  gray800: '#1F1F1F',
@@ -55,7 +55,7 @@ const colors: ColorTokensT = {
55
55
  yellow300: '#FFCF70',
56
56
  yellow400: '#FFC043',
57
57
  yellow500: '#BC8B2C',
58
- yellow600: '#997328',
58
+ yellow600: '#996F00',
59
59
  yellow700: '#674D1B',
60
60
 
61
61
  green50: '#E6F2ED',