@atlaskit/checkbox 17.1.1 → 17.1.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 +8 -0
- package/dist/cjs/checkbox.compiled.css +1 -1
- package/dist/cjs/checkbox.js +15 -8
- package/dist/es2019/checkbox.js +14 -4
- package/dist/esm/checkbox.compiled.css +1 -1
- package/dist/esm/checkbox.js +15 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/checkbox
|
|
2
2
|
|
|
3
|
+
## 17.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#152680](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152680)
|
|
8
|
+
[`21585471cb6c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21585471cb6c1) -
|
|
9
|
+
Internal refactoring to use `cssMap` instead of `css`
|
|
10
|
+
|
|
3
11
|
## 17.1.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
._9bg71mn3+svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
|
|
6
6
|
._nd5lfibj{grid-area:1/1/2/2}
|
|
7
7
|
._r050fibj+svg{grid-area:1/1/2/2}
|
|
8
|
-
.
|
|
8
|
+
._smzgj3jf._smzgj3jf:checked:focus+svg, ._1dk7j3jf._1dk7j3jf:focus+svg{outline:var(--ds-border-width-outline,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
|
|
9
9
|
._10y313gf:disabled+svg, ._1wt913gf:disabled:active+svg, ._qq8613gf:disabled:focus+svg, ._1adw13gf:disabled:hover+svg, ._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
|
|
10
10
|
._12ji1r31{outline-color:currentColor}
|
|
11
11
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
package/dist/cjs/checkbox.js
CHANGED
|
@@ -16,12 +16,22 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
16
16
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
17
|
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
|
|
18
18
|
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
19
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
20
19
|
var _internal = require("./internal");
|
|
21
20
|
var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "onChange", "analyticsContext", "label", "name", "value", "isRequired", "testId", "xcss", "className"];
|
|
22
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
23
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
24
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Using `cssMap` to avoid a Compiled bug with the transformed styles.
|
|
25
|
+
* It was using a CSS variable for the outline template string,
|
|
26
|
+
* which broke because of the use of a sibling selector.
|
|
27
|
+
*
|
|
28
|
+
* Related to: https://github.com/atlassian-labs/compiled/pull/1795
|
|
29
|
+
*
|
|
30
|
+
* Using `cssMap` seems to be a workaround for this.
|
|
31
|
+
*/
|
|
32
|
+
var checkboxStyles = {
|
|
33
|
+
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef7js4s _1h6rjs4s _smzgj3jf _1dk7j3jf _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
|
|
34
|
+
};
|
|
25
35
|
|
|
26
36
|
/**
|
|
27
37
|
* __Checkbox__
|
|
@@ -68,7 +78,7 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
68
78
|
analyticsData: analyticsContext,
|
|
69
79
|
componentName: 'checkbox',
|
|
70
80
|
packageName: "@atlaskit/checkbox",
|
|
71
|
-
packageVersion: "17.1.
|
|
81
|
+
packageVersion: "17.1.2"
|
|
72
82
|
});
|
|
73
83
|
var internalRef = (0, _react.useRef)(null);
|
|
74
84
|
var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]);
|
|
@@ -101,14 +111,11 @@ var Checkbox = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
101
111
|
name: name,
|
|
102
112
|
required: isRequired,
|
|
103
113
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
104
|
-
className: (0, _runtime.ax)([
|
|
114
|
+
className: (0, _runtime.ax)([checkboxStyles.root, className]),
|
|
105
115
|
onChange: onChangeAnalytics,
|
|
106
116
|
"aria-invalid": isInvalid ? 'true' : undefined,
|
|
107
117
|
"data-testid": testId && "".concat(testId, "--hidden-checkbox"),
|
|
108
|
-
"data-invalid": isInvalid ? 'true' : undefined
|
|
109
|
-
style: {
|
|
110
|
-
"--_gqccd2": (0, _runtime.ix)("var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")))
|
|
111
|
-
}
|
|
118
|
+
"data-invalid": isInvalid ? 'true' : undefined
|
|
112
119
|
})), /*#__PURE__*/React.createElement(_internal.CheckboxIcon, {
|
|
113
120
|
isIndeterminate: isIndeterminate,
|
|
114
121
|
isChecked: isChecked
|
package/dist/es2019/checkbox.js
CHANGED
|
@@ -6,9 +6,19 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
6
6
|
import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
7
7
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
8
8
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
9
|
-
import { B200 } from '@atlaskit/theme/colors';
|
|
10
9
|
import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
11
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Using `cssMap` to avoid a Compiled bug with the transformed styles.
|
|
12
|
+
* It was using a CSS variable for the outline template string,
|
|
13
|
+
* which broke because of the use of a sibling selector.
|
|
14
|
+
*
|
|
15
|
+
* Related to: https://github.com/atlassian-labs/compiled/pull/1795
|
|
16
|
+
*
|
|
17
|
+
* Using `cssMap` seems to be a workaround for this.
|
|
18
|
+
*/
|
|
19
|
+
const checkboxStyles = {
|
|
20
|
+
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef7js4s _1h6rjs4s _smzgj3jf _1dk7j3jf _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
|
|
21
|
+
};
|
|
12
22
|
|
|
13
23
|
/**
|
|
14
24
|
* __Checkbox__
|
|
@@ -49,7 +59,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
|
|
|
49
59
|
analyticsData: analyticsContext,
|
|
50
60
|
componentName: 'checkbox',
|
|
51
61
|
packageName: "@atlaskit/checkbox",
|
|
52
|
-
packageVersion: "17.1.
|
|
62
|
+
packageVersion: "17.1.2"
|
|
53
63
|
});
|
|
54
64
|
const internalRef = useRef(null);
|
|
55
65
|
const mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -82,7 +92,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox({
|
|
|
82
92
|
name: name,
|
|
83
93
|
required: isRequired,
|
|
84
94
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
85
|
-
className: ax([
|
|
95
|
+
className: ax([checkboxStyles.root, className]),
|
|
86
96
|
onChange: onChangeAnalytics,
|
|
87
97
|
"aria-invalid": isInvalid ? 'true' : undefined,
|
|
88
98
|
"data-testid": testId && `${testId}--hidden-checkbox`,
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
._9bg71mn3+svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
|
|
6
6
|
._nd5lfibj{grid-area:1/1/2/2}
|
|
7
7
|
._r050fibj+svg{grid-area:1/1/2/2}
|
|
8
|
-
.
|
|
8
|
+
._smzgj3jf._smzgj3jf:checked:focus+svg, ._1dk7j3jf._1dk7j3jf:focus+svg{outline:var(--ds-border-width-outline,2px) solid var(--ds-border-focused,#2684ff)}._10oaq2ws:checked[data-invalid]+svg{--checkbox-border-color:var(--local-border-checked-invalid)}
|
|
9
9
|
._10y313gf:disabled+svg, ._1wt913gf:disabled:active+svg, ._qq8613gf:disabled:focus+svg, ._1adw13gf:disabled:hover+svg, ._12sr13gf:disabled[data-invalid]+svg{cursor:not-allowed}
|
|
10
10
|
._12ji1r31{outline-color:currentColor}
|
|
11
11
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
package/dist/esm/checkbox.js
CHANGED
|
@@ -9,9 +9,19 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
9
9
|
import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
10
10
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
11
11
|
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
12
|
-
import { B200 } from '@atlaskit/theme/colors';
|
|
13
12
|
import { CheckboxIcon, Label, LabelText, RequiredIndicator } from './internal';
|
|
14
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Using `cssMap` to avoid a Compiled bug with the transformed styles.
|
|
15
|
+
* It was using a CSS variable for the outline template string,
|
|
16
|
+
* which broke because of the use of a sibling selector.
|
|
17
|
+
*
|
|
18
|
+
* Related to: https://github.com/atlassian-labs/compiled/pull/1795
|
|
19
|
+
*
|
|
20
|
+
* Using `cssMap` seems to be a workaround for this.
|
|
21
|
+
*/
|
|
22
|
+
var checkboxStyles = {
|
|
23
|
+
root: "_19itglyw _nd5lfibj _12ji1r31 _1qu2glyw _12y31o36 _1bsb1osq _4t3i1osq _r06hglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _tzy4idpf _r050fibj _9bg71mn3 _19op11so _a30fhteq _1610e4h9 _13wo93zu _q5a61gyf _8gq114p8 _wje2mov0 _1fo21cni _eyedglyw _1ef7js4s _1h6rjs4s _smzgj3jf _1dk7j3jf _l71j1i6y _t34a1i6y _y32gkivo _1ah9199y _1frj180l _h78e1g3k _dwvb1ps2 _1bok170n _1mhr17cl _fx2i3rva _10oaq2ws _w12s155b _15y61vek _e6ww155b _sg1j1vek _rphw18jz _y9y9mz2b _141bmz2b _255gmz2b _jj67mz2b _swhgmz2b _axq81diq _1jiz1diq _s9051diq _1efy1diq _1oav1diq _10y313gf _1wt913gf _qq8613gf _1adw13gf _12sr13gf _16jiglyw _693jglyw _1niqglyw _cl9tglyw _1jbnglyw _j1ta1hou _18qu1ps2 _1g52170n _1log17cl _32hzmz2b _1vv91diq _yjhd1hou _w1cowc43 _jdqn1onz _4y4t1onz _lvfrwc43 _g68dwc43 _13dk1onz _w1el1onz _a9yw1onz _1l3g1onz _dcdpgir2 _wobcgir2 _rp9wgir2 _9ebfwc43 _e43iwc43 _1tkuwc43 _1lehwc43 _b9q3wc43 _tu2918qt _1uxv18qt _1ufw18qt _opo918qt _1e8318qt _1k3d18qt _25yv18qt _1igz18qt _c7cc18qt _1swg18qt"
|
|
24
|
+
};
|
|
15
25
|
|
|
16
26
|
/**
|
|
17
27
|
* __Checkbox__
|
|
@@ -58,7 +68,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
|
|
|
58
68
|
analyticsData: analyticsContext,
|
|
59
69
|
componentName: 'checkbox',
|
|
60
70
|
packageName: "@atlaskit/checkbox",
|
|
61
|
-
packageVersion: "17.1.
|
|
71
|
+
packageVersion: "17.1.2"
|
|
62
72
|
});
|
|
63
73
|
var internalRef = useRef(null);
|
|
64
74
|
var mergedRefs = mergeRefs([internalRef, ref]);
|
|
@@ -91,14 +101,11 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(_ref
|
|
|
91
101
|
name: name,
|
|
92
102
|
required: isRequired,
|
|
93
103
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
94
|
-
className: ax([
|
|
104
|
+
className: ax([checkboxStyles.root, className]),
|
|
95
105
|
onChange: onChangeAnalytics,
|
|
96
106
|
"aria-invalid": isInvalid ? 'true' : undefined,
|
|
97
107
|
"data-testid": testId && "".concat(testId, "--hidden-checkbox"),
|
|
98
|
-
"data-invalid": isInvalid ? 'true' : undefined
|
|
99
|
-
style: {
|
|
100
|
-
"--_gqccd2": ix("var(--ds-border-width-outline, 2px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")))
|
|
101
|
-
}
|
|
108
|
+
"data-invalid": isInvalid ? 'true' : undefined
|
|
102
109
|
})), /*#__PURE__*/React.createElement(CheckboxIcon, {
|
|
103
110
|
isIndeterminate: isIndeterminate,
|
|
104
111
|
isChecked: isChecked
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/checkbox",
|
|
3
|
-
"version": "17.1.
|
|
3
|
+
"version": "17.1.2",
|
|
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/"
|