@atlaskit/checkbox 12.4.4 → 12.4.6
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/checkbox.js +24 -38
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/internal/checkbox-icon.js +6 -12
- package/dist/cjs/internal/constants.js +0 -2
- package/dist/cjs/internal/index.js +0 -5
- package/dist/cjs/internal/label-text.js +1 -3
- package/dist/cjs/internal/label.js +9 -21
- package/dist/cjs/internal/required-indicator.js +1 -4
- package/dist/cjs/internal/theme.js +0 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/checkbox.js +3 -6
- package/dist/es2019/internal/checkbox-icon.js +3 -6
- package/dist/es2019/internal/label.js +2 -5
- package/dist/es2019/version.json +1 -1
- package/dist/esm/checkbox.js +24 -29
- package/dist/esm/internal/checkbox-icon.js +5 -8
- package/dist/esm/internal/label.js +8 -13
- package/dist/esm/version.json +1 -1
- package/package.json +7 -5
- package/report.api.md +1 -1
package/CHANGELOG.md
CHANGED
package/dist/cjs/checkbox.js
CHANGED
|
@@ -1,30 +1,19 @@
|
|
|
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
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
-
|
|
16
11
|
var _react = require("react");
|
|
17
|
-
|
|
18
12
|
var _react2 = require("@emotion/react");
|
|
19
|
-
|
|
20
13
|
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
|
|
21
|
-
|
|
22
14
|
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
23
|
-
|
|
24
15
|
var _internal = require("./internal");
|
|
25
|
-
|
|
26
16
|
var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
|
|
27
|
-
|
|
28
17
|
/* eslint-disable @repo/internal/styles/no-nested-styles */
|
|
29
18
|
var checkboxStyles = (0, _react2.css)({
|
|
30
19
|
width: '100%',
|
|
@@ -134,36 +123,32 @@ var checkboxStyles = (0, _react2.css)({
|
|
|
134
123
|
* - [Code](https://atlassian.design/components/checkbox/code)
|
|
135
124
|
* - [Usage](https://atlassian.design/components/checkbox/usage)
|
|
136
125
|
*/
|
|
137
|
-
|
|
138
126
|
var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(props, ref) {
|
|
139
127
|
var isCheckedProp = props.isChecked,
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
128
|
+
_props$isDisabled = props.isDisabled,
|
|
129
|
+
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
|
|
130
|
+
_props$isInvalid = props.isInvalid,
|
|
131
|
+
isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
|
|
132
|
+
_props$defaultChecked = props.defaultChecked,
|
|
133
|
+
defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
|
|
134
|
+
_props$isIndeterminat = props.isIndeterminate,
|
|
135
|
+
isIndeterminate = _props$isIndeterminat === void 0 ? false : _props$isIndeterminat,
|
|
136
|
+
_props$size = props.size,
|
|
137
|
+
size = _props$size === void 0 ? 'medium' : _props$size,
|
|
138
|
+
onChangeProps = props.onChange,
|
|
139
|
+
analyticsContext = props.analyticsContext,
|
|
140
|
+
label = props.label,
|
|
141
|
+
name = props.name,
|
|
142
|
+
value = props.value,
|
|
143
|
+
isRequired = props.isRequired,
|
|
144
|
+
testId = props.testId,
|
|
145
|
+
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
159
146
|
var _useState = (0, _react.useState)(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
147
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
148
|
+
isCheckedState = _useState2[0],
|
|
149
|
+
setIsCheckedState = _useState2[1];
|
|
164
150
|
var onChange = (0, _react.useCallback)(function (e, analyticsEvent) {
|
|
165
151
|
setIsCheckedState(e.target.checked);
|
|
166
|
-
|
|
167
152
|
if (onChangeProps) {
|
|
168
153
|
onChangeProps(e, analyticsEvent);
|
|
169
154
|
}
|
|
@@ -174,11 +159,12 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
174
159
|
analyticsData: analyticsContext,
|
|
175
160
|
componentName: 'checkbox',
|
|
176
161
|
packageName: "@atlaskit/checkbox",
|
|
177
|
-
packageVersion: "12.4.
|
|
162
|
+
packageVersion: "12.4.6"
|
|
178
163
|
});
|
|
179
164
|
var internalRef = (0, _react.useRef)(null);
|
|
180
|
-
var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
|
|
165
|
+
var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
|
|
181
166
|
|
|
167
|
+
// Use isChecked from the state if it is controlled
|
|
182
168
|
var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
|
|
183
169
|
return (0, _react2.jsx)(_internal.Label, {
|
|
184
170
|
isDisabled: isDisabled,
|
package/dist/cjs/index.js
CHANGED
|
@@ -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,5 +16,4 @@ Object.defineProperty(exports, "default", {
|
|
|
17
16
|
return _checkbox.default;
|
|
18
17
|
}
|
|
19
18
|
});
|
|
20
|
-
|
|
21
19
|
var _checkbox = _interopRequireDefault(require("./checkbox"));
|
|
@@ -1,19 +1,15 @@
|
|
|
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
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = require("react");
|
|
11
|
-
|
|
12
9
|
var _react2 = require("@emotion/react");
|
|
13
|
-
|
|
14
10
|
var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
|
|
15
|
-
|
|
16
11
|
/** @jsx jsx */
|
|
12
|
+
|
|
17
13
|
function getIcon(isIndeterminate, isChecked) {
|
|
18
14
|
if (isIndeterminate) {
|
|
19
15
|
return (0, _react2.jsx)("rect", {
|
|
@@ -25,17 +21,17 @@ function getIcon(isIndeterminate, isChecked) {
|
|
|
25
21
|
rx: "1"
|
|
26
22
|
});
|
|
27
23
|
}
|
|
28
|
-
|
|
29
24
|
if (isChecked) {
|
|
30
25
|
return (0, _react2.jsx)("path", {
|
|
31
26
|
d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
|
|
32
27
|
fill: "inherit"
|
|
33
28
|
});
|
|
34
|
-
}
|
|
35
|
-
|
|
29
|
+
}
|
|
36
30
|
|
|
31
|
+
// No icon
|
|
37
32
|
return null;
|
|
38
33
|
}
|
|
34
|
+
|
|
39
35
|
/**
|
|
40
36
|
* __Checkbox icon__
|
|
41
37
|
*
|
|
@@ -44,12 +40,10 @@ function getIcon(isIndeterminate, isChecked) {
|
|
|
44
40
|
*
|
|
45
41
|
* @internal
|
|
46
42
|
*/
|
|
47
|
-
|
|
48
|
-
|
|
49
43
|
var CheckboxIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
50
44
|
var size = _ref.size,
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
isIndeterminate = _ref.isIndeterminate,
|
|
46
|
+
isChecked = _ref.isChecked;
|
|
53
47
|
var icon = (0, _react.useMemo)(function () {
|
|
54
48
|
return getIcon(isIndeterminate, isChecked);
|
|
55
49
|
}, [isIndeterminate, isChecked]);
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.gridSize = exports.fontFamily = void 0;
|
|
7
|
-
|
|
8
7
|
var _constants = require("@atlaskit/theme/constants");
|
|
9
|
-
|
|
10
8
|
var fontFamily = (0, _constants.fontFamily)();
|
|
11
9
|
exports.fontFamily = fontFamily;
|
|
12
10
|
var gridSize = (0, _constants.gridSize)();
|
|
@@ -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
|
});
|
|
@@ -29,11 +28,7 @@ Object.defineProperty(exports, "RequiredIndicator", {
|
|
|
29
28
|
return _requiredIndicator.default;
|
|
30
29
|
}
|
|
31
30
|
});
|
|
32
|
-
|
|
33
31
|
var _checkboxIcon = _interopRequireDefault(require("./checkbox-icon"));
|
|
34
|
-
|
|
35
32
|
var _label = _interopRequireDefault(require("./label"));
|
|
36
|
-
|
|
37
33
|
var _labelText = _interopRequireDefault(require("./label-text"));
|
|
38
|
-
|
|
39
34
|
var _requiredIndicator = _interopRequireDefault(require("./required-indicator"));
|
|
@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = LabelText;
|
|
7
|
-
|
|
8
7
|
var _react = require("@emotion/react");
|
|
9
|
-
|
|
10
8
|
/** @jsx jsx */
|
|
9
|
+
|
|
11
10
|
var labelTextStyles = (0, _react.css)({
|
|
12
11
|
alignSelf: 'center',
|
|
13
12
|
gridArea: '1 / 2 / 2 / 3'
|
|
14
13
|
});
|
|
15
|
-
|
|
16
14
|
function LabelText(_ref) {
|
|
17
15
|
var children = _ref.children;
|
|
18
16
|
return (0, _react.jsx)("span", {
|
|
@@ -1,23 +1,17 @@
|
|
|
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
|
});
|
|
8
7
|
exports.default = Label;
|
|
9
|
-
|
|
10
8
|
var _react = require("@emotion/react");
|
|
11
|
-
|
|
12
9
|
var _colors = require("@atlaskit/theme/colors");
|
|
13
|
-
|
|
14
10
|
var _components = require("@atlaskit/theme/components");
|
|
15
|
-
|
|
16
11
|
var _constants = require("./constants");
|
|
17
|
-
|
|
18
12
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
19
|
-
|
|
20
13
|
/** @jsx jsx */
|
|
14
|
+
|
|
21
15
|
var labelStyles = (0, _react.css)({
|
|
22
16
|
display: 'grid',
|
|
23
17
|
gridAutoColumns: '1fr',
|
|
@@ -45,7 +39,6 @@ var themeStyles = {
|
|
|
45
39
|
'--local-background-checked-hover': _theme.default.light.boxColor.hoveredAndChecked,
|
|
46
40
|
'--local-background-disabled': _theme.default.light.boxColor.disabled,
|
|
47
41
|
'--local-background-hover': _theme.default.light.boxColor.hovered,
|
|
48
|
-
|
|
49
42
|
/**
|
|
50
43
|
* Border
|
|
51
44
|
*/
|
|
@@ -58,7 +51,6 @@ var themeStyles = {
|
|
|
58
51
|
'--local-border-focus': _theme.default.light.borderColor.focused,
|
|
59
52
|
'--local-border-hover': _theme.default.light.borderColor.hovered,
|
|
60
53
|
'--local-border-invalid': _theme.default.light.borderColor.invalid,
|
|
61
|
-
|
|
62
54
|
/**
|
|
63
55
|
* Tick
|
|
64
56
|
*/
|
|
@@ -77,7 +69,6 @@ var themeStyles = {
|
|
|
77
69
|
'--local-background-checked-hover': _theme.default.dark.boxColor.hoveredAndChecked,
|
|
78
70
|
'--local-background-disabled': _theme.default.dark.boxColor.disabled,
|
|
79
71
|
'--local-background-hover': _theme.default.dark.boxColor.hovered,
|
|
80
|
-
|
|
81
72
|
/**
|
|
82
73
|
* Border
|
|
83
74
|
*/
|
|
@@ -90,7 +81,6 @@ var themeStyles = {
|
|
|
90
81
|
'--local-border-focus': _theme.default.dark.borderColor.focused,
|
|
91
82
|
'--local-border-hover': _theme.default.dark.borderColor.hovered,
|
|
92
83
|
'--local-border-invalid': _theme.default.dark.borderColor.invalid,
|
|
93
|
-
|
|
94
84
|
/**
|
|
95
85
|
* Tick
|
|
96
86
|
*/
|
|
@@ -100,19 +90,17 @@ var themeStyles = {
|
|
|
100
90
|
'--local-tick-rest': 'transparent'
|
|
101
91
|
})
|
|
102
92
|
};
|
|
103
|
-
|
|
104
93
|
function Label(_ref) {
|
|
105
94
|
var children = _ref.children,
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
95
|
+
isDisabled = _ref.isDisabled,
|
|
96
|
+
testId = _ref.testId,
|
|
97
|
+
onClick = _ref.onClick,
|
|
98
|
+
label = _ref.label,
|
|
99
|
+
id = _ref.id;
|
|
112
100
|
var _useGlobalTheme = (0, _components.useGlobalTheme)(),
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
101
|
+
mode = _useGlobalTheme.mode;
|
|
102
|
+
return (
|
|
103
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
|
|
116
104
|
(0, _react.jsx)("label", {
|
|
117
105
|
css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
|
|
118
106
|
"data-testid": testId,
|
|
@@ -4,17 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = RequiredIndicator;
|
|
7
|
-
|
|
8
7
|
var _react = require("@emotion/react");
|
|
9
|
-
|
|
10
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
-
|
|
12
9
|
/** @jsx jsx */
|
|
10
|
+
|
|
13
11
|
var requiredIndicatorStyles = (0, _react.css)({
|
|
14
12
|
paddingLeft: "var(--ds-space-025, 2px)",
|
|
15
13
|
color: "var(--ds-text-danger, ".concat(_colors.R500, ")")
|
|
16
14
|
});
|
|
17
|
-
|
|
18
15
|
function RequiredIndicator() {
|
|
19
16
|
return (0, _react.jsx)("span", {
|
|
20
17
|
css: requiredIndicatorStyles,
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/checkbox.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
|
|
3
2
|
/** @jsx jsx */
|
|
4
3
|
import { forwardRef, memo, useCallback, useRef, useState } from 'react';
|
|
5
4
|
import { css, jsx } from '@emotion/react';
|
|
6
5
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
7
6
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
8
7
|
import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
9
|
-
|
|
10
8
|
/* eslint-disable @repo/internal/styles/no-nested-styles */
|
|
11
9
|
const checkboxStyles = css({
|
|
12
10
|
width: '100%',
|
|
@@ -116,7 +114,6 @@ const checkboxStyles = css({
|
|
|
116
114
|
* - [Code](https://atlassian.design/components/checkbox/code)
|
|
117
115
|
* - [Usage](https://atlassian.design/components/checkbox/usage)
|
|
118
116
|
*/
|
|
119
|
-
|
|
120
117
|
const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
|
121
118
|
const {
|
|
122
119
|
isChecked: isCheckedProp,
|
|
@@ -137,7 +134,6 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
|
|
|
137
134
|
const [isCheckedState, setIsCheckedState] = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked);
|
|
138
135
|
const onChange = useCallback((e, analyticsEvent) => {
|
|
139
136
|
setIsCheckedState(e.target.checked);
|
|
140
|
-
|
|
141
137
|
if (onChangeProps) {
|
|
142
138
|
onChangeProps(e, analyticsEvent);
|
|
143
139
|
}
|
|
@@ -148,11 +144,12 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(pr
|
|
|
148
144
|
analyticsData: analyticsContext,
|
|
149
145
|
componentName: 'checkbox',
|
|
150
146
|
packageName: "@atlaskit/checkbox",
|
|
151
|
-
packageVersion: "12.4.
|
|
147
|
+
packageVersion: "12.4.6"
|
|
152
148
|
});
|
|
153
149
|
const internalRef = useRef(null);
|
|
154
|
-
const mergedRefs = mergeRefs([internalRef, ref]);
|
|
150
|
+
const mergedRefs = mergeRefs([internalRef, ref]);
|
|
155
151
|
|
|
152
|
+
// Use isChecked from the state if it is controlled
|
|
156
153
|
const isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
|
|
157
154
|
return jsx(Label, {
|
|
158
155
|
isDisabled: isDisabled,
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { memo, useMemo } from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
4
|
import PrimitiveSVGIcon from '@atlaskit/icon/svg';
|
|
5
|
-
|
|
6
5
|
function getIcon(isIndeterminate, isChecked) {
|
|
7
6
|
if (isIndeterminate) {
|
|
8
7
|
return jsx("rect", {
|
|
@@ -14,17 +13,17 @@ function getIcon(isIndeterminate, isChecked) {
|
|
|
14
13
|
rx: "1"
|
|
15
14
|
});
|
|
16
15
|
}
|
|
17
|
-
|
|
18
16
|
if (isChecked) {
|
|
19
17
|
return jsx("path", {
|
|
20
18
|
d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
|
|
21
19
|
fill: "inherit"
|
|
22
20
|
});
|
|
23
|
-
}
|
|
24
|
-
|
|
21
|
+
}
|
|
25
22
|
|
|
23
|
+
// No icon
|
|
26
24
|
return null;
|
|
27
25
|
}
|
|
26
|
+
|
|
28
27
|
/**
|
|
29
28
|
* __Checkbox icon__
|
|
30
29
|
*
|
|
@@ -33,8 +32,6 @@ function getIcon(isIndeterminate, isChecked) {
|
|
|
33
32
|
*
|
|
34
33
|
* @internal
|
|
35
34
|
*/
|
|
36
|
-
|
|
37
|
-
|
|
38
35
|
const CheckboxIcon = /*#__PURE__*/memo(({
|
|
39
36
|
size,
|
|
40
37
|
isIndeterminate,
|
|
@@ -31,7 +31,6 @@ const themeStyles = {
|
|
|
31
31
|
'--local-background-checked-hover': theme.light.boxColor.hoveredAndChecked,
|
|
32
32
|
'--local-background-disabled': theme.light.boxColor.disabled,
|
|
33
33
|
'--local-background-hover': theme.light.boxColor.hovered,
|
|
34
|
-
|
|
35
34
|
/**
|
|
36
35
|
* Border
|
|
37
36
|
*/
|
|
@@ -44,7 +43,6 @@ const themeStyles = {
|
|
|
44
43
|
'--local-border-focus': theme.light.borderColor.focused,
|
|
45
44
|
'--local-border-hover': theme.light.borderColor.hovered,
|
|
46
45
|
'--local-border-invalid': theme.light.borderColor.invalid,
|
|
47
|
-
|
|
48
46
|
/**
|
|
49
47
|
* Tick
|
|
50
48
|
*/
|
|
@@ -63,7 +61,6 @@ const themeStyles = {
|
|
|
63
61
|
'--local-background-checked-hover': theme.dark.boxColor.hoveredAndChecked,
|
|
64
62
|
'--local-background-disabled': theme.dark.boxColor.disabled,
|
|
65
63
|
'--local-background-hover': theme.dark.boxColor.hovered,
|
|
66
|
-
|
|
67
64
|
/**
|
|
68
65
|
* Border
|
|
69
66
|
*/
|
|
@@ -76,7 +73,6 @@ const themeStyles = {
|
|
|
76
73
|
'--local-border-focus': theme.dark.borderColor.focused,
|
|
77
74
|
'--local-border-hover': theme.dark.borderColor.hovered,
|
|
78
75
|
'--local-border-invalid': theme.dark.borderColor.invalid,
|
|
79
|
-
|
|
80
76
|
/**
|
|
81
77
|
* Tick
|
|
82
78
|
*/
|
|
@@ -97,7 +93,8 @@ export default function Label({
|
|
|
97
93
|
const {
|
|
98
94
|
mode
|
|
99
95
|
} = useGlobalTheme();
|
|
100
|
-
return (
|
|
96
|
+
return (
|
|
97
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
|
|
101
98
|
jsx("label", {
|
|
102
99
|
css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
|
|
103
100
|
"data-testid": testId,
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/checkbox.js
CHANGED
|
@@ -2,14 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId"];
|
|
5
|
-
|
|
6
5
|
/** @jsx jsx */
|
|
7
6
|
import { forwardRef, memo, useCallback, useRef, useState } from 'react';
|
|
8
7
|
import { css, jsx } from '@emotion/react';
|
|
9
8
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
10
9
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
11
10
|
import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
12
|
-
|
|
13
11
|
/* eslint-disable @repo/internal/styles/no-nested-styles */
|
|
14
12
|
var checkboxStyles = css({
|
|
15
13
|
width: '100%',
|
|
@@ -119,36 +117,32 @@ var checkboxStyles = css({
|
|
|
119
117
|
* - [Code](https://atlassian.design/components/checkbox/code)
|
|
120
118
|
* - [Usage](https://atlassian.design/components/checkbox/usage)
|
|
121
119
|
*/
|
|
122
|
-
|
|
123
120
|
var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
|
|
124
121
|
var isCheckedProp = props.isChecked,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
122
|
+
_props$isDisabled = props.isDisabled,
|
|
123
|
+
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
|
|
124
|
+
_props$isInvalid = props.isInvalid,
|
|
125
|
+
isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
|
|
126
|
+
_props$defaultChecked = props.defaultChecked,
|
|
127
|
+
defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
|
|
128
|
+
_props$isIndeterminat = props.isIndeterminate,
|
|
129
|
+
isIndeterminate = _props$isIndeterminat === void 0 ? false : _props$isIndeterminat,
|
|
130
|
+
_props$size = props.size,
|
|
131
|
+
size = _props$size === void 0 ? 'medium' : _props$size,
|
|
132
|
+
onChangeProps = props.onChange,
|
|
133
|
+
analyticsContext = props.analyticsContext,
|
|
134
|
+
label = props.label,
|
|
135
|
+
name = props.name,
|
|
136
|
+
value = props.value,
|
|
137
|
+
isRequired = props.isRequired,
|
|
138
|
+
testId = props.testId,
|
|
139
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
144
140
|
var _useState = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
141
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
142
|
+
isCheckedState = _useState2[0],
|
|
143
|
+
setIsCheckedState = _useState2[1];
|
|
149
144
|
var onChange = useCallback(function (e, analyticsEvent) {
|
|
150
145
|
setIsCheckedState(e.target.checked);
|
|
151
|
-
|
|
152
146
|
if (onChangeProps) {
|
|
153
147
|
onChangeProps(e, analyticsEvent);
|
|
154
148
|
}
|
|
@@ -159,11 +153,12 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
|
|
|
159
153
|
analyticsData: analyticsContext,
|
|
160
154
|
componentName: 'checkbox',
|
|
161
155
|
packageName: "@atlaskit/checkbox",
|
|
162
|
-
packageVersion: "12.4.
|
|
156
|
+
packageVersion: "12.4.6"
|
|
163
157
|
});
|
|
164
158
|
var internalRef = useRef(null);
|
|
165
|
-
var mergedRefs = mergeRefs([internalRef, ref]);
|
|
159
|
+
var mergedRefs = mergeRefs([internalRef, ref]);
|
|
166
160
|
|
|
161
|
+
// Use isChecked from the state if it is controlled
|
|
167
162
|
var isChecked = isCheckedProp === undefined ? isCheckedState : isCheckedProp;
|
|
168
163
|
return jsx(Label, {
|
|
169
164
|
isDisabled: isDisabled,
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { memo, useMemo } from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
4
|
import PrimitiveSVGIcon from '@atlaskit/icon/svg';
|
|
5
|
-
|
|
6
5
|
function getIcon(isIndeterminate, isChecked) {
|
|
7
6
|
if (isIndeterminate) {
|
|
8
7
|
return jsx("rect", {
|
|
@@ -14,17 +13,17 @@ function getIcon(isIndeterminate, isChecked) {
|
|
|
14
13
|
rx: "1"
|
|
15
14
|
});
|
|
16
15
|
}
|
|
17
|
-
|
|
18
16
|
if (isChecked) {
|
|
19
17
|
return jsx("path", {
|
|
20
18
|
d: "M9.707 11.293a1 1 0 1 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L11 12.586l-1.293-1.293z",
|
|
21
19
|
fill: "inherit"
|
|
22
20
|
});
|
|
23
|
-
}
|
|
24
|
-
|
|
21
|
+
}
|
|
25
22
|
|
|
23
|
+
// No icon
|
|
26
24
|
return null;
|
|
27
25
|
}
|
|
26
|
+
|
|
28
27
|
/**
|
|
29
28
|
* __Checkbox icon__
|
|
30
29
|
*
|
|
@@ -33,12 +32,10 @@ function getIcon(isIndeterminate, isChecked) {
|
|
|
33
32
|
*
|
|
34
33
|
* @internal
|
|
35
34
|
*/
|
|
36
|
-
|
|
37
|
-
|
|
38
35
|
var CheckboxIcon = /*#__PURE__*/memo(function (_ref) {
|
|
39
36
|
var size = _ref.size,
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
isIndeterminate = _ref.isIndeterminate,
|
|
38
|
+
isChecked = _ref.isChecked;
|
|
42
39
|
var icon = useMemo(function () {
|
|
43
40
|
return getIcon(isIndeterminate, isChecked);
|
|
44
41
|
}, [isIndeterminate, isChecked]);
|
|
@@ -31,7 +31,6 @@ var themeStyles = {
|
|
|
31
31
|
'--local-background-checked-hover': theme.light.boxColor.hoveredAndChecked,
|
|
32
32
|
'--local-background-disabled': theme.light.boxColor.disabled,
|
|
33
33
|
'--local-background-hover': theme.light.boxColor.hovered,
|
|
34
|
-
|
|
35
34
|
/**
|
|
36
35
|
* Border
|
|
37
36
|
*/
|
|
@@ -44,7 +43,6 @@ var themeStyles = {
|
|
|
44
43
|
'--local-border-focus': theme.light.borderColor.focused,
|
|
45
44
|
'--local-border-hover': theme.light.borderColor.hovered,
|
|
46
45
|
'--local-border-invalid': theme.light.borderColor.invalid,
|
|
47
|
-
|
|
48
46
|
/**
|
|
49
47
|
* Tick
|
|
50
48
|
*/
|
|
@@ -63,7 +61,6 @@ var themeStyles = {
|
|
|
63
61
|
'--local-background-checked-hover': theme.dark.boxColor.hoveredAndChecked,
|
|
64
62
|
'--local-background-disabled': theme.dark.boxColor.disabled,
|
|
65
63
|
'--local-background-hover': theme.dark.boxColor.hovered,
|
|
66
|
-
|
|
67
64
|
/**
|
|
68
65
|
* Border
|
|
69
66
|
*/
|
|
@@ -76,7 +73,6 @@ var themeStyles = {
|
|
|
76
73
|
'--local-border-focus': theme.dark.borderColor.focused,
|
|
77
74
|
'--local-border-hover': theme.dark.borderColor.hovered,
|
|
78
75
|
'--local-border-invalid': theme.dark.borderColor.invalid,
|
|
79
|
-
|
|
80
76
|
/**
|
|
81
77
|
* Tick
|
|
82
78
|
*/
|
|
@@ -88,16 +84,15 @@ var themeStyles = {
|
|
|
88
84
|
};
|
|
89
85
|
export default function Label(_ref) {
|
|
90
86
|
var children = _ref.children,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
87
|
+
isDisabled = _ref.isDisabled,
|
|
88
|
+
testId = _ref.testId,
|
|
89
|
+
onClick = _ref.onClick,
|
|
90
|
+
label = _ref.label,
|
|
91
|
+
id = _ref.id;
|
|
97
92
|
var _useGlobalTheme = useGlobalTheme(),
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
93
|
+
mode = _useGlobalTheme.mode;
|
|
94
|
+
return (
|
|
95
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
|
|
101
96
|
jsx("label", {
|
|
102
97
|
css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
|
|
103
98
|
"data-testid": testId,
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/checkbox",
|
|
3
|
-
"version": "12.4.
|
|
3
|
+
"version": "12.4.6",
|
|
4
4
|
"description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
".": "./src/index.tsx"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@atlaskit/analytics-next": "^
|
|
30
|
+
"@atlaskit/analytics-next": "^9.0.0",
|
|
31
31
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
32
32
|
"@atlaskit/icon": "^21.11.0",
|
|
33
33
|
"@atlaskit/theme": "^12.2.0",
|
|
34
|
-
"@atlaskit/tokens": "^
|
|
34
|
+
"@atlaskit/tokens": "^1.2.0",
|
|
35
35
|
"@babel/runtime": "^7.0.0",
|
|
36
36
|
"@emotion/react": "^11.7.1"
|
|
37
37
|
},
|
|
@@ -69,8 +69,10 @@
|
|
|
69
69
|
"design-system": "v1",
|
|
70
70
|
"ui-components": "lite-mode",
|
|
71
71
|
"analytics": "analytics-next",
|
|
72
|
-
"
|
|
73
|
-
|
|
72
|
+
"design-tokens": [
|
|
73
|
+
"color",
|
|
74
|
+
"spacing"
|
|
75
|
+
],
|
|
74
76
|
"deprecation": "no-deprecated-imports",
|
|
75
77
|
"styling": [
|
|
76
78
|
"emotion",
|
package/report.api.md
CHANGED