@spark-web/action-dropdown 1.0.1 → 1.0.2
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @spark-web/action-dropdown
|
|
2
2
|
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#750](https://github.com/brighte-labs/spark-web/pull/750)
|
|
8
|
+
[`7b91a87`](https://github.com/brighte-labs/spark-web/commit/7b91a87462a487447f790d402e59003ed896df3c)
|
|
9
|
+
Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
|
|
10
|
+
decouple from combobox
|
|
11
|
+
|
|
3
12
|
## 1.0.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
6
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
7
7
|
var a11y = require('@spark-web/a11y');
|
|
8
|
-
var reactSelectOverrides = require('@spark-web/combobox/src/react-select-overrides');
|
|
9
8
|
var icon = require('@spark-web/icon');
|
|
10
9
|
var text = require('@spark-web/text');
|
|
11
10
|
var theme = require('@spark-web/theme');
|
|
@@ -16,6 +15,41 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
|
|
|
16
15
|
|
|
17
16
|
var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
|
|
18
17
|
|
|
18
|
+
var useReactSelectThemeOverride = function useReactSelectThemeOverride() {
|
|
19
|
+
var theme$1 = theme.useTheme();
|
|
20
|
+
return function (selectTheme) {
|
|
21
|
+
var _theme$components$tex;
|
|
22
|
+
return _objectSpread(_objectSpread({}, selectTheme), {}, {
|
|
23
|
+
borderRadius: ((_theme$components$tex = theme$1.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderRadius) || 0,
|
|
24
|
+
colors: _objectSpread(_objectSpread({}, selectTheme.colors), {}, {
|
|
25
|
+
// TODO: map from theme object when tokens are revised
|
|
26
|
+
primary: '#00a87b',
|
|
27
|
+
primary75: '#00c28d',
|
|
28
|
+
primary50: '#9acbb8',
|
|
29
|
+
primary25: '#c8eada',
|
|
30
|
+
danger: '#e61e32',
|
|
31
|
+
dangerLight: '#fec1b5',
|
|
32
|
+
neutral0: 'white',
|
|
33
|
+
neutral5: '#fafcfe',
|
|
34
|
+
neutral10: '#f1f4fb',
|
|
35
|
+
neutral20: '#dce1ec',
|
|
36
|
+
neutral30: '#c7cedb',
|
|
37
|
+
// neutral40,
|
|
38
|
+
neutral50: '#98a2b8',
|
|
39
|
+
neutral60: '#646f84',
|
|
40
|
+
neutral70: '#1a2a3a'
|
|
41
|
+
// neutral80,
|
|
42
|
+
// neutral90,
|
|
43
|
+
}),
|
|
44
|
+
spacing: {
|
|
45
|
+
baseUnit: theme$1.spacing.xsmall,
|
|
46
|
+
controlHeight: theme$1.sizing.medium,
|
|
47
|
+
menuGutter: theme$1.spacing.xxsmall
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
|
|
19
53
|
var isBrowser = typeof window !== 'undefined';
|
|
20
54
|
var ActionDropdown = function ActionDropdown(_ref) {
|
|
21
55
|
_ref.data;
|
|
@@ -28,7 +62,7 @@ var ActionDropdown = function ActionDropdown(_ref) {
|
|
|
28
62
|
_ref$menuWidth = _ref.menuWidth,
|
|
29
63
|
menuWidth = _ref$menuWidth === void 0 ? '100%' : _ref$menuWidth;
|
|
30
64
|
var theme$1 = theme.useTheme();
|
|
31
|
-
var reactSelectTheme =
|
|
65
|
+
var reactSelectTheme = useReactSelectThemeOverride();
|
|
32
66
|
|
|
33
67
|
// Use the same text styling as combobox
|
|
34
68
|
var _useText = text.useText({
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
6
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
7
7
|
var a11y = require('@spark-web/a11y');
|
|
8
|
-
var reactSelectOverrides = require('@spark-web/combobox/src/react-select-overrides');
|
|
9
8
|
var icon = require('@spark-web/icon');
|
|
10
9
|
var text = require('@spark-web/text');
|
|
11
10
|
var theme = require('@spark-web/theme');
|
|
@@ -16,6 +15,41 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
|
|
|
16
15
|
|
|
17
16
|
var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
|
|
18
17
|
|
|
18
|
+
var useReactSelectThemeOverride = function useReactSelectThemeOverride() {
|
|
19
|
+
var theme$1 = theme.useTheme();
|
|
20
|
+
return function (selectTheme) {
|
|
21
|
+
var _theme$components$tex;
|
|
22
|
+
return _objectSpread(_objectSpread({}, selectTheme), {}, {
|
|
23
|
+
borderRadius: ((_theme$components$tex = theme$1.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderRadius) || 0,
|
|
24
|
+
colors: _objectSpread(_objectSpread({}, selectTheme.colors), {}, {
|
|
25
|
+
// TODO: map from theme object when tokens are revised
|
|
26
|
+
primary: '#00a87b',
|
|
27
|
+
primary75: '#00c28d',
|
|
28
|
+
primary50: '#9acbb8',
|
|
29
|
+
primary25: '#c8eada',
|
|
30
|
+
danger: '#e61e32',
|
|
31
|
+
dangerLight: '#fec1b5',
|
|
32
|
+
neutral0: 'white',
|
|
33
|
+
neutral5: '#fafcfe',
|
|
34
|
+
neutral10: '#f1f4fb',
|
|
35
|
+
neutral20: '#dce1ec',
|
|
36
|
+
neutral30: '#c7cedb',
|
|
37
|
+
// neutral40,
|
|
38
|
+
neutral50: '#98a2b8',
|
|
39
|
+
neutral60: '#646f84',
|
|
40
|
+
neutral70: '#1a2a3a'
|
|
41
|
+
// neutral80,
|
|
42
|
+
// neutral90,
|
|
43
|
+
}),
|
|
44
|
+
spacing: {
|
|
45
|
+
baseUnit: theme$1.spacing.xsmall,
|
|
46
|
+
controlHeight: theme$1.sizing.medium,
|
|
47
|
+
menuGutter: theme$1.spacing.xxsmall
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
|
|
19
53
|
var isBrowser = typeof window !== 'undefined';
|
|
20
54
|
var ActionDropdown = function ActionDropdown(_ref) {
|
|
21
55
|
_ref.data;
|
|
@@ -28,7 +62,7 @@ var ActionDropdown = function ActionDropdown(_ref) {
|
|
|
28
62
|
_ref$menuWidth = _ref.menuWidth,
|
|
29
63
|
menuWidth = _ref$menuWidth === void 0 ? '100%' : _ref$menuWidth;
|
|
30
64
|
var theme$1 = theme.useTheme();
|
|
31
|
-
var reactSelectTheme =
|
|
65
|
+
var reactSelectTheme = useReactSelectThemeOverride();
|
|
32
66
|
|
|
33
67
|
// Use the same text styling as combobox
|
|
34
68
|
var _useText = text.useText({
|
|
@@ -1,13 +1,47 @@
|
|
|
1
1
|
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
2
2
|
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
|
|
3
3
|
import { useFocusRing } from '@spark-web/a11y';
|
|
4
|
-
import { useReactSelectThemeOverride } from '@spark-web/combobox/src/react-select-overrides';
|
|
5
4
|
import { ChevronDownIcon } from '@spark-web/icon';
|
|
6
5
|
import { useText } from '@spark-web/text';
|
|
7
6
|
import { useTheme } from '@spark-web/theme';
|
|
8
7
|
import ReactSelect, { components } from 'react-select';
|
|
9
8
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
10
9
|
|
|
10
|
+
var useReactSelectThemeOverride = function useReactSelectThemeOverride() {
|
|
11
|
+
var theme = useTheme();
|
|
12
|
+
return function (selectTheme) {
|
|
13
|
+
var _theme$components$tex;
|
|
14
|
+
return _objectSpread(_objectSpread({}, selectTheme), {}, {
|
|
15
|
+
borderRadius: ((_theme$components$tex = theme.components.textInput) === null || _theme$components$tex === void 0 ? void 0 : _theme$components$tex.borderRadius) || 0,
|
|
16
|
+
colors: _objectSpread(_objectSpread({}, selectTheme.colors), {}, {
|
|
17
|
+
// TODO: map from theme object when tokens are revised
|
|
18
|
+
primary: '#00a87b',
|
|
19
|
+
primary75: '#00c28d',
|
|
20
|
+
primary50: '#9acbb8',
|
|
21
|
+
primary25: '#c8eada',
|
|
22
|
+
danger: '#e61e32',
|
|
23
|
+
dangerLight: '#fec1b5',
|
|
24
|
+
neutral0: 'white',
|
|
25
|
+
neutral5: '#fafcfe',
|
|
26
|
+
neutral10: '#f1f4fb',
|
|
27
|
+
neutral20: '#dce1ec',
|
|
28
|
+
neutral30: '#c7cedb',
|
|
29
|
+
// neutral40,
|
|
30
|
+
neutral50: '#98a2b8',
|
|
31
|
+
neutral60: '#646f84',
|
|
32
|
+
neutral70: '#1a2a3a'
|
|
33
|
+
// neutral80,
|
|
34
|
+
// neutral90,
|
|
35
|
+
}),
|
|
36
|
+
spacing: {
|
|
37
|
+
baseUnit: theme.spacing.xsmall,
|
|
38
|
+
controlHeight: theme.sizing.medium,
|
|
39
|
+
menuGutter: theme.spacing.xxsmall
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
|
|
11
45
|
var isBrowser = typeof window !== 'undefined';
|
|
12
46
|
var ActionDropdown = function ActionDropdown(_ref) {
|
|
13
47
|
_ref.data;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/action-dropdown",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
"@emotion/react": "^11.14.0",
|
|
20
20
|
"@spark-web/a11y": "^5.3.0",
|
|
21
21
|
"@spark-web/box": "^6.0.0",
|
|
22
|
-
"@spark-web/combobox": "^6.0.0",
|
|
23
22
|
"@spark-web/icon": "^5.1.0",
|
|
24
23
|
"@spark-web/text": "^5.3.0",
|
|
25
24
|
"@spark-web/utils": "^5.1.0",
|