@atlaskit/button 16.5.3 → 16.5.5
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 +12 -0
- package/dist/cjs/button-group.js +3 -11
- package/dist/cjs/button.js +14 -34
- package/dist/cjs/custom-theme-button/custom-theme-button.js +41 -76
- package/dist/cjs/custom-theme-button/index.js +0 -3
- package/dist/cjs/custom-theme-button/theme.js +31 -38
- package/dist/cjs/entry-points/button-group.js +0 -2
- package/dist/cjs/entry-points/custom-theme-button.js +0 -4
- package/dist/cjs/entry-points/loading-button.js +0 -2
- package/dist/cjs/entry-points/standard-button.js +0 -3
- package/dist/cjs/index.js +0 -8
- package/dist/cjs/loading-button.js +4 -12
- package/dist/cjs/shared/block-events.js +0 -6
- package/dist/cjs/shared/button-base.js +48 -66
- package/dist/cjs/shared/colors.js +0 -5
- package/dist/cjs/shared/css.js +17 -28
- package/dist/cjs/shared/get-is-only-single-icon.js +2 -7
- package/dist/cjs/shared/loading-spinner.js +4 -15
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/button-group.js +1 -3
- package/dist/es2019/button.js +7 -7
- package/dist/es2019/custom-theme-button/custom-theme-button.js +19 -25
- package/dist/es2019/custom-theme-button/theme.js +21 -16
- package/dist/es2019/index.js +3 -1
- package/dist/es2019/loading-button.js +2 -2
- package/dist/es2019/shared/block-events.js +0 -4
- package/dist/es2019/shared/button-base.js +19 -18
- package/dist/es2019/shared/css.js +22 -14
- package/dist/es2019/shared/get-is-only-single-icon.js +0 -3
- package/dist/es2019/shared/loading-spinner.js +0 -5
- package/dist/es2019/version.json +1 -1
- package/dist/esm/button-group.js +2 -4
- package/dist/esm/button.js +14 -18
- package/dist/esm/custom-theme-button/custom-theme-button.js +41 -61
- package/dist/esm/custom-theme-button/theme.js +31 -31
- package/dist/esm/index.js +3 -1
- package/dist/esm/loading-button.js +4 -5
- package/dist/esm/shared/block-events.js +0 -4
- package/dist/esm/shared/button-base.js +51 -51
- package/dist/esm/shared/css.js +17 -19
- package/dist/esm/shared/get-is-only-single-icon.js +2 -6
- package/dist/esm/shared/loading-spinner.js +4 -11
- package/dist/esm/version.json +1 -1
- package/package.json +2 -2
- package/report.api.md +13 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 16.5.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 16.5.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
|
|
14
|
+
|
|
3
15
|
## 16.5.3
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/button-group.js
CHANGED
|
@@ -1,40 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = ButtonGroup;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _react2 = require("@emotion/react");
|
|
13
|
-
|
|
14
10
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
-
|
|
16
11
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
-
|
|
18
12
|
/** @jsx jsx */
|
|
13
|
+
|
|
19
14
|
var buttonGroupStyles = (0, _react2.css)({
|
|
20
15
|
display: 'inline-flex',
|
|
21
|
-
|
|
22
|
-
gap: "var(--ds-scale-050, 4px)",
|
|
16
|
+
gap: "var(--ds-space-050, 4px)",
|
|
23
17
|
'> *': {
|
|
24
18
|
flex: '1 0 auto'
|
|
25
19
|
}
|
|
26
20
|
});
|
|
27
|
-
|
|
28
21
|
function ButtonGroup(_ref) {
|
|
29
22
|
var appearance = _ref.appearance,
|
|
30
|
-
|
|
23
|
+
children = _ref.children;
|
|
31
24
|
return (0, _react2.jsx)("div", {
|
|
32
25
|
css: buttonGroupStyles
|
|
33
26
|
}, _react.default.Children.map(_react.default.Children.toArray(children), function (child, idx) {
|
|
34
27
|
if (!child) {
|
|
35
28
|
return null;
|
|
36
29
|
}
|
|
37
|
-
|
|
38
30
|
return (0, _react2.jsx)(_react.Fragment, {
|
|
39
31
|
key: idx
|
|
40
32
|
}, appearance ?
|
package/dist/cjs/button.js
CHANGED
|
@@ -1,40 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
|
-
|
|
18
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
13
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
21
|
-
|
|
22
14
|
var _components = require("@atlaskit/theme/components");
|
|
23
|
-
|
|
24
15
|
var _buttonBase = _interopRequireDefault(require("./shared/button-base"));
|
|
25
|
-
|
|
26
16
|
var _css = require("./shared/css");
|
|
27
|
-
|
|
28
17
|
var _getIsOnlySingleIcon = _interopRequireDefault(require("./shared/get-is-only-single-icon"));
|
|
29
|
-
|
|
30
18
|
var _excluded = ["onMouseDown", "onMouseUp"];
|
|
31
|
-
|
|
32
19
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
-
|
|
34
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
35
|
-
|
|
36
21
|
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
37
|
-
|
|
38
22
|
/**
|
|
39
23
|
* __Button__
|
|
40
24
|
*
|
|
@@ -46,37 +30,32 @@ var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerC
|
|
|
46
30
|
*/
|
|
47
31
|
var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
|
|
48
32
|
var _ref$onMouseDown = _ref.onMouseDown,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
33
|
+
providedOnMouseDown = _ref$onMouseDown === void 0 ? _noop.default : _ref$onMouseDown,
|
|
34
|
+
_ref$onMouseUp = _ref.onMouseUp,
|
|
35
|
+
providedOnMouseUp = _ref$onMouseUp === void 0 ? _noop.default : _ref$onMouseUp,
|
|
36
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
54
37
|
var _useGlobalTheme = (0, _components.useGlobalTheme)(),
|
|
55
|
-
|
|
56
|
-
|
|
38
|
+
mode = _useGlobalTheme.mode;
|
|
57
39
|
var appearance = rest.appearance || 'default';
|
|
58
40
|
var spacing = rest.spacing || 'default';
|
|
59
41
|
var shouldFitContainer = Boolean(rest.shouldFitContainer);
|
|
60
42
|
var isSelected = Boolean(rest.isSelected);
|
|
61
43
|
var isOnlySingleIcon = (0, _getIsOnlySingleIcon.default)(rest);
|
|
62
|
-
|
|
63
44
|
var _useState = (0, _react.useState)(false),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
// in Firefox
|
|
68
|
-
|
|
45
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
46
|
+
isActive = _useState2[0],
|
|
47
|
+
setIsActive = _useState2[1];
|
|
69
48
|
|
|
49
|
+
// Wrap onMouseDown / onMouseUp to manually trigger active state
|
|
50
|
+
// in Firefox
|
|
70
51
|
var onMouseDown = (0, _react.useCallback)(function (event) {
|
|
71
52
|
providedOnMouseDown(event);
|
|
72
|
-
|
|
73
53
|
if (isFirefox) {
|
|
74
54
|
setIsActive(true);
|
|
75
55
|
}
|
|
76
56
|
}, [providedOnMouseDown, setIsActive]);
|
|
77
57
|
var onMouseUp = (0, _react.useCallback)(function (event) {
|
|
78
58
|
providedOnMouseUp(event);
|
|
79
|
-
|
|
80
59
|
if (isFirefox) {
|
|
81
60
|
setIsActive(false);
|
|
82
61
|
}
|
|
@@ -93,16 +72,17 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
|
|
|
93
72
|
}, [appearance, spacing, mode, isSelected, shouldFitContainer, isOnlySingleIcon]);
|
|
94
73
|
return /*#__PURE__*/_react.default.createElement(_buttonBase.default, (0, _extends2.default)({}, rest, {
|
|
95
74
|
ref: ref,
|
|
96
|
-
buttonCss: buttonCss
|
|
75
|
+
buttonCss: buttonCss
|
|
76
|
+
// Due to how click events are set, we need to set active styles
|
|
97
77
|
// manually in Firefox and wrap onMouseDown/onMouseUp
|
|
98
78
|
,
|
|
99
79
|
"data-firefox-is-active": isActive ? true : undefined,
|
|
100
80
|
onMouseDown: onMouseDown,
|
|
101
81
|
onMouseUp: onMouseUp
|
|
102
82
|
}));
|
|
103
|
-
}));
|
|
104
|
-
|
|
83
|
+
}));
|
|
105
84
|
|
|
85
|
+
// Tools including enzyme rely on components having a display name
|
|
106
86
|
Button.displayName = 'Button';
|
|
107
87
|
var _default = Button;
|
|
108
88
|
exports.default = _default;
|
|
@@ -1,91 +1,66 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
-
|
|
18
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
19
|
-
|
|
20
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
-
|
|
22
14
|
var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
|
|
23
|
-
|
|
24
15
|
var _buttonBase = _interopRequireDefault(require("../shared/button-base"));
|
|
25
|
-
|
|
26
16
|
var _getIsOnlySingleIcon = _interopRequireDefault(require("../shared/get-is-only-single-icon"));
|
|
27
|
-
|
|
28
17
|
var _loadingSpinner = _interopRequireDefault(require("../shared/loading-spinner"));
|
|
29
|
-
|
|
30
18
|
var _theme = _interopRequireWildcard(require("./theme"));
|
|
31
|
-
|
|
32
19
|
var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"];
|
|
33
|
-
|
|
34
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
35
|
-
|
|
36
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
|
-
|
|
38
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
39
|
-
|
|
40
23
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
41
|
-
|
|
42
24
|
function getInteractionState(_ref) {
|
|
43
25
|
var _ref$isDisabled = _ref.isDisabled,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
26
|
+
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
27
|
+
_ref$isActive = _ref.isActive,
|
|
28
|
+
isActive = _ref$isActive === void 0 ? false : _ref$isActive,
|
|
29
|
+
_ref$isFocus = _ref.isFocus,
|
|
30
|
+
isFocus = _ref$isFocus === void 0 ? false : _ref$isFocus,
|
|
31
|
+
_ref$isHover = _ref.isHover,
|
|
32
|
+
isHover = _ref$isHover === void 0 ? false : _ref$isHover,
|
|
33
|
+
_ref$isSelected = _ref.isSelected,
|
|
34
|
+
isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
|
|
35
|
+
_ref$isLoading = _ref.isLoading,
|
|
36
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
|
|
56
37
|
if (isDisabled) {
|
|
57
38
|
return 'disabled';
|
|
58
39
|
}
|
|
59
|
-
|
|
60
40
|
if (isSelected && isFocus) {
|
|
61
41
|
return 'focusSelected';
|
|
62
42
|
}
|
|
63
|
-
|
|
64
43
|
if (isSelected) {
|
|
65
44
|
return 'selected';
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
45
|
+
}
|
|
46
|
+
// not allowing active or focus style changes while loading
|
|
69
47
|
if (!isLoading && isActive) {
|
|
70
48
|
return 'active';
|
|
71
49
|
}
|
|
72
|
-
|
|
73
50
|
if (!isLoading && isHover) {
|
|
74
51
|
return 'hover';
|
|
75
52
|
}
|
|
76
|
-
|
|
77
53
|
if (isFocus) {
|
|
78
54
|
return 'focus';
|
|
79
55
|
}
|
|
80
|
-
|
|
81
56
|
return 'default';
|
|
82
57
|
}
|
|
83
|
-
|
|
84
58
|
var initial = {
|
|
85
59
|
isHover: false,
|
|
86
60
|
isActive: false,
|
|
87
61
|
isFocus: false
|
|
88
62
|
};
|
|
63
|
+
|
|
89
64
|
/**
|
|
90
65
|
* __Custom theme button__
|
|
91
66
|
*
|
|
@@ -93,32 +68,30 @@ var initial = {
|
|
|
93
68
|
*
|
|
94
69
|
* - [Examples](https://atlassian.design/components/button/examples#custom-theme-button)
|
|
95
70
|
*/
|
|
96
|
-
|
|
97
71
|
var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function CustomThemeButton(_ref2, ref) {
|
|
98
72
|
var _ref2$appearance = _ref2.appearance,
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
73
|
+
appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
|
|
74
|
+
_ref2$autoFocus = _ref2.autoFocus,
|
|
75
|
+
autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
|
|
76
|
+
_ref2$isDisabled = _ref2.isDisabled,
|
|
77
|
+
isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
|
|
78
|
+
_ref2$isSelected = _ref2.isSelected,
|
|
79
|
+
isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
|
|
80
|
+
_ref2$shouldFitContai = _ref2.shouldFitContainer,
|
|
81
|
+
shouldFitContainer = _ref2$shouldFitContai === void 0 ? false : _ref2$shouldFitContai,
|
|
82
|
+
_ref2$spacing = _ref2.spacing,
|
|
83
|
+
spacing = _ref2$spacing === void 0 ? 'default' : _ref2$spacing,
|
|
84
|
+
_ref2$isLoading = _ref2.isLoading,
|
|
85
|
+
isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
|
|
86
|
+
providedOnMouseEnter = _ref2.onMouseEnter,
|
|
87
|
+
providedOnMouseLeave = _ref2.onMouseLeave,
|
|
88
|
+
providedOnMouseDown = _ref2.onMouseDown,
|
|
89
|
+
providedOnMouseUp = _ref2.onMouseUp,
|
|
90
|
+
providedOnFocus = _ref2.onFocus,
|
|
91
|
+
providedOnBlur = _ref2.onBlur,
|
|
92
|
+
_ref2$theme = _ref2.theme,
|
|
93
|
+
theme = _ref2$theme === void 0 ? _theme.defaultThemeFn : _ref2$theme,
|
|
94
|
+
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
|
122
95
|
// TODO is there a nicer way to do this?
|
|
123
96
|
// Add default props back into object for spreading
|
|
124
97
|
var restProps = _objectSpread({
|
|
@@ -129,19 +102,16 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
|
|
|
129
102
|
shouldFitContainer: shouldFitContainer,
|
|
130
103
|
spacing: spacing
|
|
131
104
|
}, rest);
|
|
132
|
-
|
|
133
105
|
var _useState = (0, _react.useState)(initial),
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
106
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
107
|
+
state = _useState2[0],
|
|
108
|
+
setState = _useState2[1];
|
|
138
109
|
var onMouseEnter = (0, _react.useCallback)(function (event) {
|
|
139
110
|
setState(function (current) {
|
|
140
111
|
return _objectSpread(_objectSpread({}, current), {}, {
|
|
141
112
|
isHover: true
|
|
142
113
|
});
|
|
143
114
|
});
|
|
144
|
-
|
|
145
115
|
if (providedOnMouseEnter) {
|
|
146
116
|
providedOnMouseEnter(event);
|
|
147
117
|
}
|
|
@@ -153,7 +123,6 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
|
|
|
153
123
|
isActive: false
|
|
154
124
|
});
|
|
155
125
|
});
|
|
156
|
-
|
|
157
126
|
if (providedOnMouseLeave) {
|
|
158
127
|
providedOnMouseLeave(event);
|
|
159
128
|
}
|
|
@@ -164,7 +133,6 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
|
|
|
164
133
|
isActive: true
|
|
165
134
|
});
|
|
166
135
|
});
|
|
167
|
-
|
|
168
136
|
if (providedOnMouseDown) {
|
|
169
137
|
providedOnMouseDown(event);
|
|
170
138
|
}
|
|
@@ -175,7 +143,6 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
|
|
|
175
143
|
isActive: false
|
|
176
144
|
});
|
|
177
145
|
});
|
|
178
|
-
|
|
179
146
|
if (providedOnMouseUp) {
|
|
180
147
|
providedOnMouseUp(event);
|
|
181
148
|
}
|
|
@@ -186,7 +153,6 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
|
|
|
186
153
|
isFocus: true
|
|
187
154
|
});
|
|
188
155
|
});
|
|
189
|
-
|
|
190
156
|
if (providedOnFocus) {
|
|
191
157
|
providedOnFocus(event);
|
|
192
158
|
}
|
|
@@ -197,7 +163,6 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
|
|
|
197
163
|
isFocus: false
|
|
198
164
|
});
|
|
199
165
|
});
|
|
200
|
-
|
|
201
166
|
if (providedOnBlur) {
|
|
202
167
|
providedOnBlur(event);
|
|
203
168
|
}
|
|
@@ -230,9 +195,9 @@ var CustomThemeButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
|
|
|
230
195
|
}));
|
|
231
196
|
});
|
|
232
197
|
}));
|
|
233
|
-
}));
|
|
234
|
-
|
|
198
|
+
}));
|
|
235
199
|
|
|
200
|
+
// Tools including enzyme rely on components having a display name
|
|
236
201
|
CustomThemeButton.displayName = 'CustomThemeButton';
|
|
237
202
|
var _default = CustomThemeButton;
|
|
238
203
|
exports.default = _default;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "default", {
|
|
|
17
16
|
return _customThemeButton.default;
|
|
18
17
|
}
|
|
19
18
|
});
|
|
20
|
-
|
|
21
19
|
var _customThemeButton = _interopRequireDefault(require("./custom-theme-button"));
|
|
22
|
-
|
|
23
20
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -9,43 +8,38 @@ exports.default = void 0;
|
|
|
9
8
|
exports.defaultThemeFn = defaultThemeFn;
|
|
10
9
|
exports.getCustomCss = getCustomCss;
|
|
11
10
|
exports.getSpecifiers = getSpecifiers;
|
|
12
|
-
|
|
13
11
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
|
|
15
12
|
var _components = require("@atlaskit/theme/components");
|
|
16
|
-
|
|
17
13
|
var _css = require("../shared/css");
|
|
18
|
-
|
|
19
14
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
-
|
|
21
15
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
|
-
|
|
23
16
|
var stateToSelectorMap = {
|
|
24
17
|
focus: '&:focus',
|
|
25
18
|
focusSelected: '&:focus',
|
|
26
19
|
hover: '&:hover',
|
|
27
20
|
active: '&:active',
|
|
28
21
|
disabled: '&[disabled]'
|
|
29
|
-
};
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// Mapping the new clean css back to the legacy theme format.
|
|
30
25
|
// The legacy theme format has all styles at the top level (no nested selectors)
|
|
31
26
|
// and uses `getSpecifiers()` to apply the style to all pseudo states
|
|
32
|
-
|
|
33
27
|
function getCustomCss(_ref) {
|
|
34
28
|
var _ref$appearance = _ref.appearance,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
29
|
+
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
30
|
+
_ref$spacing = _ref.spacing,
|
|
31
|
+
spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
|
|
32
|
+
_ref$mode = _ref.mode,
|
|
33
|
+
mode = _ref$mode === void 0 ? 'light' : _ref$mode,
|
|
34
|
+
_ref$isSelected = _ref.isSelected,
|
|
35
|
+
isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
|
|
36
|
+
_ref$shouldFitContain = _ref.shouldFitContainer,
|
|
37
|
+
shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
|
|
38
|
+
_ref$iconIsOnlyChild = _ref.iconIsOnlyChild,
|
|
39
|
+
iconIsOnlyChild = _ref$iconIsOnlyChild === void 0 ? false : _ref$iconIsOnlyChild,
|
|
40
|
+
_ref$isLoading = _ref.isLoading,
|
|
41
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
42
|
+
state = _ref.state;
|
|
49
43
|
var result = (0, _css.getCss)({
|
|
50
44
|
appearance: appearance,
|
|
51
45
|
spacing: spacing,
|
|
@@ -53,48 +47,46 @@ function getCustomCss(_ref) {
|
|
|
53
47
|
isSelected: isSelected,
|
|
54
48
|
shouldFitContainer: shouldFitContainer,
|
|
55
49
|
isOnlySingleIcon: iconIsOnlyChild
|
|
56
|
-
});
|
|
57
|
-
// this is because we are not expressing that we can have two pseudo states at a time
|
|
50
|
+
});
|
|
58
51
|
|
|
59
|
-
|
|
52
|
+
// we need to disable the default browser focus styles always
|
|
53
|
+
// this is because we are not expressing that we can have two pseudo states at a time
|
|
54
|
+
result.outline = 'none';
|
|
60
55
|
|
|
56
|
+
// Pulling relevant styles up to the top level
|
|
61
57
|
var selector = stateToSelectorMap[state];
|
|
62
|
-
|
|
63
58
|
if (selector) {
|
|
64
59
|
result = _objectSpread(_objectSpread({}, result), result[selector]);
|
|
65
60
|
}
|
|
66
|
-
|
|
67
61
|
if (isLoading) {
|
|
68
62
|
result = _objectSpread(_objectSpread({}, result), result['&[data-has-overlay="true"]']);
|
|
69
|
-
}
|
|
70
|
-
|
|
63
|
+
}
|
|
71
64
|
|
|
65
|
+
// Delete all selectors and just keep root styles
|
|
72
66
|
Object.keys(result).forEach(function (key) {
|
|
73
67
|
// want to keep this one
|
|
74
68
|
if (key === '&::-moz-focus-inner') {
|
|
75
69
|
return;
|
|
76
|
-
}
|
|
77
|
-
|
|
70
|
+
}
|
|
78
71
|
|
|
72
|
+
// Not using .startsWith for ie11
|
|
79
73
|
if (key.indexOf('&') === 0) {
|
|
80
74
|
delete result[key];
|
|
81
75
|
}
|
|
82
76
|
});
|
|
83
77
|
return result;
|
|
84
|
-
}
|
|
85
|
-
// To do this we are overwriting all pseudo selectors
|
|
86
|
-
|
|
78
|
+
}
|
|
87
79
|
|
|
80
|
+
// This styling approach works by generating a 'style' and applying with maximum specificity
|
|
81
|
+
// To do this we are overwriting all pseudo selectors
|
|
88
82
|
function getSpecifiers(styles) {
|
|
89
83
|
return {
|
|
90
84
|
'&, &:hover, &:active, &:focus, &:visited, &:disabled, &[disabled]': styles
|
|
91
85
|
};
|
|
92
86
|
}
|
|
93
|
-
|
|
94
87
|
function defaultThemeFn(current, values) {
|
|
95
88
|
return current(values);
|
|
96
89
|
}
|
|
97
|
-
|
|
98
90
|
var Theme = (0, _components.createTheme)(function (themeProps) {
|
|
99
91
|
return {
|
|
100
92
|
buttonStyles: getCustomCss(themeProps),
|
|
@@ -103,7 +95,8 @@ var Theme = (0, _components.createTheme)(function (themeProps) {
|
|
|
103
95
|
// that we are changing theme soon there is no point
|
|
104
96
|
spinnerStyles: {}
|
|
105
97
|
};
|
|
106
|
-
});
|
|
98
|
+
});
|
|
107
99
|
|
|
100
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
108
101
|
var _default = Theme;
|
|
109
102
|
exports.default = _default;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
|
|
|
11
10
|
return _buttonGroup.default;
|
|
12
11
|
}
|
|
13
12
|
});
|
|
14
|
-
|
|
15
13
|
var _buttonGroup = _interopRequireDefault(require("../button-group"));
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -17,9 +16,6 @@ Object.defineProperty(exports, "default", {
|
|
|
17
16
|
return _customThemeButton.default;
|
|
18
17
|
}
|
|
19
18
|
});
|
|
20
|
-
|
|
21
19
|
var _customThemeButton = _interopRequireWildcard(require("../custom-theme-button"));
|
|
22
|
-
|
|
23
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
|
-
|
|
25
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
|
|
|
11
10
|
return _loadingButton.default;
|
|
12
11
|
}
|
|
13
12
|
});
|
|
14
|
-
|
|
15
13
|
var _loadingButton = _interopRequireDefault(require("../loading-button"));
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -11,7 +10,5 @@ Object.defineProperty(exports, "default", {
|
|
|
11
10
|
return _button.default;
|
|
12
11
|
}
|
|
13
12
|
});
|
|
14
|
-
|
|
15
13
|
require("@emotion/react");
|
|
16
|
-
|
|
17
14
|
var _button = _interopRequireDefault(require("../button"));
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -37,15 +35,9 @@ Object.defineProperty(exports, "default", {
|
|
|
37
35
|
return _standardButton.default;
|
|
38
36
|
}
|
|
39
37
|
});
|
|
40
|
-
|
|
41
38
|
var _standardButton = _interopRequireDefault(require("./entry-points/standard-button"));
|
|
42
|
-
|
|
43
39
|
var _loadingButton = _interopRequireDefault(require("./entry-points/loading-button"));
|
|
44
|
-
|
|
45
40
|
var _customThemeButton = _interopRequireWildcard(require("./entry-points/custom-theme-button"));
|
|
46
|
-
|
|
47
41
|
var _buttonGroup = _interopRequireDefault(require("./entry-points/button-group"));
|
|
48
|
-
|
|
49
42
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
50
|
-
|
|
51
43
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|