@dhis2-ui/checkbox 8.7.0 → 8.7.1
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.
|
@@ -16,8 +16,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
16
16
|
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
|
|
19
|
-
const commonStyles = ["svg.jsx-
|
|
20
|
-
commonStyles.__hash = "
|
|
19
|
+
const commonStyles = ["svg.jsx-4069423049{display:block;pointer-events:none;}", "svg.jsx-4069423049 .border.jsx-4069423049{fill:".concat(_uiConstants.colors.grey800, ";}"), "svg.jsx-4069423049 .background.jsx-4069423049,svg.jsx-4069423049 .indeterminate.jsx-4069423049,svg.jsx-4069423049 .checkmark.jsx-4069423049{fill:".concat(_uiConstants.colors.white, ";}"), "svg.checked.jsx-4069423049 .background.jsx-4069423049,svg.indeterminate.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.teal500, ";}"), "svg.valid.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.warning.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.error.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.checked.jsx-4069423049 .border.jsx-4069423049,svg.indeterminate.jsx-4069423049 .border.jsx-4069423049{fill:".concat(_uiConstants.colors.teal900, ";}"), "svg.jsx-4069423049:not(.checked) .checkmark.jsx-4069423049,svg.jsx-4069423049:not(.indeterminate) .indeterminate.jsx-4069423049{fill:none;}", "svg.jsx-4069423049:not(.checked):not(.indeterminate) .background.jsx-4069423049{fill:".concat(_uiConstants.colors.white, ";}")];
|
|
20
|
+
commonStyles.__hash = "4069423049";
|
|
21
21
|
|
|
22
22
|
function CheckboxRegular(_ref) {
|
|
23
23
|
let {
|
|
@@ -26,33 +26,33 @@ function CheckboxRegular(_ref) {
|
|
|
26
26
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
27
27
|
viewBox: "0 0 18 18",
|
|
28
28
|
xmlns: "http://www.w3.org/2000/svg",
|
|
29
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
29
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + (className || "")
|
|
30
30
|
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
31
31
|
x: "0",
|
|
32
32
|
y: "0",
|
|
33
33
|
width: "18",
|
|
34
34
|
height: "18",
|
|
35
35
|
rx: "3",
|
|
36
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
36
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "background"
|
|
37
37
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
38
|
-
d: "
|
|
39
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
38
|
+
d: "M15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 0,16.6568542 0,15 L0,3 C0,1.34314575 1.34314575,0 3,0 L15,0 Z M15,1 L3,1 C1.9456382,1 1.08183488,1.81587779 1.00548574,2.85073766 L1,3 L1,15 C1,16.0543618 1.81587779,16.9181651 2.85073766,16.9945143 L3,17 L15,17 C16.0543618,17 16.9181651,16.1841222 16.9945143,15.1492623 L17,15 L17,3 C17,1.9456382 16.1841222,1.08183488 15.1492623,1.00548574 L15,1 Z",
|
|
39
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "border"
|
|
40
40
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
41
41
|
d: "M4.74451387,8.02852516 C4.39595738,8.11985643 4.12375034,8.39235188 4.03251575,8.74127768 C3.94128115,9.09020348 4.04521722,9.46125864 4.30437605,9.71182782 L7.29823844,12.7078028 C7.68753993,13.0973991 8.31859767,13.0973991 8.70789916,12.7078028 L13.695624,6.71585285 C13.9547828,6.46528367 14.0587189,6.09422851 13.9674843,5.74530271 C13.8762497,5.39637691 13.6040426,5.12388146 13.2554861,5.0325502 C12.9069296,4.94121893 12.5362672,5.04526513 12.2859632,5.30469855 L8.0030688,10.5910713 L5.71403676,8.30067351 C5.46373279,8.0412401 5.09307036,7.9371939 4.74451387,8.02852516 Z",
|
|
42
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
42
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "checkmark"
|
|
43
43
|
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
44
44
|
x: "4",
|
|
45
45
|
y: "8",
|
|
46
46
|
width: "10",
|
|
47
47
|
height: "2",
|
|
48
48
|
rx: "1",
|
|
49
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
49
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "indeterminate"
|
|
50
50
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
51
51
|
id: commonStyles.__hash
|
|
52
52
|
}, commonStyles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
53
|
-
id: "
|
|
54
|
-
dynamic: [_uiConstants.colors.
|
|
55
|
-
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", "svg.
|
|
53
|
+
id: "2753140462",
|
|
54
|
+
dynamic: [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]
|
|
55
|
+
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey300, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue700, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red700, ";}")]));
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
CheckboxRegular.propTypes = {
|
|
@@ -66,36 +66,32 @@ function CheckboxDense(_ref2) {
|
|
|
66
66
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
67
67
|
viewBox: "0 0 14 14",
|
|
68
68
|
xmlns: "http://www.w3.org/2000/svg",
|
|
69
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
69
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + (className || "")
|
|
70
70
|
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
71
|
-
fill: "#009688",
|
|
72
71
|
x: "0",
|
|
73
72
|
y: "0",
|
|
74
73
|
width: "14",
|
|
75
74
|
height: "14",
|
|
76
75
|
rx: "2",
|
|
77
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
76
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "background"
|
|
78
77
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
79
78
|
d: "M2,0 L12,0 C13.1045695,0 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 L1,12 C1,12.5522847 1.44771525,13 2,13 L12,13 C12.5522847,13 13,12.5522847 13,12 L13,2 C13,1.44771525 12.5522847,1 12,1 L2,1 Z",
|
|
80
|
-
|
|
81
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2720111562", [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "border"
|
|
79
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "border"
|
|
82
80
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
83
81
|
d: "M10.3520005,3.30015877 L5.54268293,8.03252726 L3.64634146,6.16652726 L2.28668615,7.5044281 L5.54310367,10.7010587 L11.7145993,4.628307 L10.3520005,3.30015877 Z M5.54268293,9.43547274 L5.61193184,9.36733181 L5.54226219,9.29894127 L5.47309681,9.367 L5.54268293,9.43547274 Z M10.6496329,4.41023392 L10.6495057,4.35652297 L10.5648412,4.35672356 L10.2854007,4.631693 L10.3553166,4.69984123 L10.6496329,4.41023392 Z M3.42891348,7.22439304 L3.35030905,7.22439304 L3.35034135,7.27820863 L3.64634146,7.56947274 L3.71331385,7.5035719 L3.42891348,7.22439304 Z",
|
|
84
|
-
|
|
85
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2720111562", [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "checkmark"
|
|
82
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "checkmark"
|
|
86
83
|
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
87
|
-
fill: "#FFFFFF",
|
|
88
84
|
x: "3",
|
|
89
85
|
y: "6",
|
|
90
86
|
width: "8",
|
|
91
87
|
height: "2",
|
|
92
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["
|
|
88
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "indeterminate"
|
|
93
89
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
94
90
|
id: commonStyles.__hash
|
|
95
91
|
}, commonStyles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
96
|
-
id: "
|
|
97
|
-
dynamic: [_uiConstants.colors.
|
|
98
|
-
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", "svg.
|
|
92
|
+
id: "86695588",
|
|
93
|
+
dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]
|
|
94
|
+
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.disabled.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.disabled.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey500, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue800, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red800, ";}")]));
|
|
99
95
|
}
|
|
100
96
|
|
|
101
97
|
CheckboxDense.propTypes = {
|
|
@@ -110,7 +110,7 @@ class Checkbox extends _react.Component {
|
|
|
110
110
|
});
|
|
111
111
|
return /*#__PURE__*/_react.default.createElement("label", {
|
|
112
112
|
"data-test": dataTest,
|
|
113
|
-
className: _style.default.dynamic([["
|
|
113
|
+
className: _style.default.dynamic([["1088888266", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)(className, {
|
|
114
114
|
disabled,
|
|
115
115
|
dense
|
|
116
116
|
}) || "")
|
|
@@ -126,9 +126,9 @@ class Checkbox extends _react.Component {
|
|
|
126
126
|
onFocus: this.handleFocus,
|
|
127
127
|
onKeyDown: this.handleKeyDown,
|
|
128
128
|
onBlur: this.handleBlur,
|
|
129
|
-
className: _style.default.dynamic([["
|
|
129
|
+
className: _style.default.dynamic([["1088888266", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]])
|
|
130
130
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
131
|
-
className: _style.default.dynamic([["
|
|
131
|
+
className: _style.default.dynamic([["1088888266", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)('icon', {
|
|
132
132
|
dense
|
|
133
133
|
}) || "")
|
|
134
134
|
}, dense ? /*#__PURE__*/_react.default.createElement(_checkboxIcon.CheckboxDense, {
|
|
@@ -136,9 +136,9 @@ class Checkbox extends _react.Component {
|
|
|
136
136
|
}) : /*#__PURE__*/_react.default.createElement(_checkboxIcon.CheckboxRegular, {
|
|
137
137
|
className: classes
|
|
138
138
|
})), label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
139
|
-
id: "
|
|
140
|
-
dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.theme.focus]
|
|
141
|
-
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer;color:".concat(_uiConstants.colors.grey900, ";font-size:
|
|
139
|
+
id: "1088888266",
|
|
140
|
+
dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]
|
|
141
|
+
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer;color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:19px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(_uiConstants.theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:18px;left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:".concat(_uiConstants.spacers.dp4, ";border:2px solid transparent;padding:1px;border-radius:5px;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:4px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}")]));
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
}
|
|
@@ -2,8 +2,8 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
2
2
|
import { colors } from '@dhis2/ui-constants';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
const commonStyles = ["svg.jsx-
|
|
6
|
-
commonStyles.__hash = "
|
|
5
|
+
const commonStyles = ["svg.jsx-4069423049{display:block;pointer-events:none;}", "svg.jsx-4069423049 .border.jsx-4069423049{fill:".concat(colors.grey800, ";}"), "svg.jsx-4069423049 .background.jsx-4069423049,svg.jsx-4069423049 .indeterminate.jsx-4069423049,svg.jsx-4069423049 .checkmark.jsx-4069423049{fill:".concat(colors.white, ";}"), "svg.checked.jsx-4069423049 .background.jsx-4069423049,svg.indeterminate.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.teal500, ";}"), "svg.valid.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.blue600, ";}"), "svg.warning.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.yellow700, ";}"), "svg.error.jsx-4069423049 .background.jsx-4069423049{fill:".concat(colors.red500, ";}"), "svg.checked.jsx-4069423049 .border.jsx-4069423049,svg.indeterminate.jsx-4069423049 .border.jsx-4069423049{fill:".concat(colors.teal900, ";}"), "svg.jsx-4069423049:not(.checked) .checkmark.jsx-4069423049,svg.jsx-4069423049:not(.indeterminate) .indeterminate.jsx-4069423049{fill:none;}", "svg.jsx-4069423049:not(.checked):not(.indeterminate) .background.jsx-4069423049{fill:".concat(colors.white, ";}")];
|
|
6
|
+
commonStyles.__hash = "4069423049";
|
|
7
7
|
export function CheckboxRegular(_ref) {
|
|
8
8
|
let {
|
|
9
9
|
className
|
|
@@ -11,33 +11,33 @@ export function CheckboxRegular(_ref) {
|
|
|
11
11
|
return /*#__PURE__*/React.createElement("svg", {
|
|
12
12
|
viewBox: "0 0 18 18",
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
14
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + (className || "")
|
|
15
15
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
16
16
|
x: "0",
|
|
17
17
|
y: "0",
|
|
18
18
|
width: "18",
|
|
19
19
|
height: "18",
|
|
20
20
|
rx: "3",
|
|
21
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
21
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "background"
|
|
22
22
|
}), /*#__PURE__*/React.createElement("path", {
|
|
23
|
-
d: "
|
|
24
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
23
|
+
d: "M15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 0,16.6568542 0,15 L0,3 C0,1.34314575 1.34314575,0 3,0 L15,0 Z M15,1 L3,1 C1.9456382,1 1.08183488,1.81587779 1.00548574,2.85073766 L1,3 L1,15 C1,16.0543618 1.81587779,16.9181651 2.85073766,16.9945143 L3,17 L15,17 C16.0543618,17 16.9181651,16.1841222 16.9945143,15.1492623 L17,15 L17,3 C17,1.9456382 16.1841222,1.08183488 15.1492623,1.00548574 L15,1 Z",
|
|
24
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "border"
|
|
25
25
|
}), /*#__PURE__*/React.createElement("path", {
|
|
26
26
|
d: "M4.74451387,8.02852516 C4.39595738,8.11985643 4.12375034,8.39235188 4.03251575,8.74127768 C3.94128115,9.09020348 4.04521722,9.46125864 4.30437605,9.71182782 L7.29823844,12.7078028 C7.68753993,13.0973991 8.31859767,13.0973991 8.70789916,12.7078028 L13.695624,6.71585285 C13.9547828,6.46528367 14.0587189,6.09422851 13.9674843,5.74530271 C13.8762497,5.39637691 13.6040426,5.12388146 13.2554861,5.0325502 C12.9069296,4.94121893 12.5362672,5.04526513 12.2859632,5.30469855 L8.0030688,10.5910713 L5.71403676,8.30067351 C5.46373279,8.0412401 5.09307036,7.9371939 4.74451387,8.02852516 Z",
|
|
27
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
27
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "checkmark"
|
|
28
28
|
}), /*#__PURE__*/React.createElement("rect", {
|
|
29
29
|
x: "4",
|
|
30
30
|
y: "8",
|
|
31
31
|
width: "10",
|
|
32
32
|
height: "2",
|
|
33
33
|
rx: "1",
|
|
34
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
34
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2753140462", [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "indeterminate"
|
|
35
35
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
36
36
|
id: commonStyles.__hash
|
|
37
37
|
}, commonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
38
|
-
id: "
|
|
39
|
-
dynamic: [colors.
|
|
40
|
-
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", "svg.
|
|
38
|
+
id: "2753140462",
|
|
39
|
+
dynamic: [colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]
|
|
40
|
+
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(colors.grey300, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue700, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red700, ";}")]));
|
|
41
41
|
}
|
|
42
42
|
CheckboxRegular.propTypes = {
|
|
43
43
|
className: PropTypes.string
|
|
@@ -49,36 +49,32 @@ export function CheckboxDense(_ref2) {
|
|
|
49
49
|
return /*#__PURE__*/React.createElement("svg", {
|
|
50
50
|
viewBox: "0 0 14 14",
|
|
51
51
|
xmlns: "http://www.w3.org/2000/svg",
|
|
52
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
52
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + (className || "")
|
|
53
53
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
54
|
-
fill: "#009688",
|
|
55
54
|
x: "0",
|
|
56
55
|
y: "0",
|
|
57
56
|
width: "14",
|
|
58
57
|
height: "14",
|
|
59
58
|
rx: "2",
|
|
60
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
59
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "background"
|
|
61
60
|
}), /*#__PURE__*/React.createElement("path", {
|
|
62
61
|
d: "M2,0 L12,0 C13.1045695,0 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 L1,12 C1,12.5522847 1.44771525,13 2,13 L12,13 C12.5522847,13 13,12.5522847 13,12 L13,2 C13,1.44771525 12.5522847,1 12,1 L2,1 Z",
|
|
63
|
-
|
|
64
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2720111562", [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "border"
|
|
62
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "border"
|
|
65
63
|
}), /*#__PURE__*/React.createElement("path", {
|
|
66
64
|
d: "M10.3520005,3.30015877 L5.54268293,8.03252726 L3.64634146,6.16652726 L2.28668615,7.5044281 L5.54310367,10.7010587 L11.7145993,4.628307 L10.3520005,3.30015877 Z M5.54268293,9.43547274 L5.61193184,9.36733181 L5.54226219,9.29894127 L5.47309681,9.367 L5.54268293,9.43547274 Z M10.6496329,4.41023392 L10.6495057,4.35652297 L10.5648412,4.35672356 L10.2854007,4.631693 L10.3553166,4.69984123 L10.6496329,4.41023392 Z M3.42891348,7.22439304 L3.35030905,7.22439304 L3.35034135,7.27820863 L3.64634146,7.56947274 L3.71331385,7.5035719 L3.42891348,7.22439304 Z",
|
|
67
|
-
|
|
68
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2720111562", [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "checkmark"
|
|
65
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "checkmark"
|
|
69
66
|
}), /*#__PURE__*/React.createElement("rect", {
|
|
70
|
-
fill: "#FFFFFF",
|
|
71
67
|
x: "3",
|
|
72
68
|
y: "6",
|
|
73
69
|
width: "8",
|
|
74
70
|
height: "2",
|
|
75
|
-
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["
|
|
71
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["86695588", [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "indeterminate"
|
|
76
72
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
77
73
|
id: commonStyles.__hash
|
|
78
74
|
}, commonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
79
|
-
id: "
|
|
80
|
-
dynamic: [colors.
|
|
81
|
-
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", "svg.
|
|
75
|
+
id: "86695588",
|
|
76
|
+
dynamic: [colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]
|
|
77
|
+
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.disabled.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.disabled.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue800, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red800, ";}")]));
|
|
82
78
|
}
|
|
83
79
|
CheckboxDense.propTypes = {
|
|
84
80
|
className: PropTypes.string
|
|
@@ -3,7 +3,7 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
3
3
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
4
|
|
|
5
5
|
import { mutuallyExclusive } from '@dhis2/prop-types';
|
|
6
|
-
import { colors, theme, sharedPropTypes } from '@dhis2/ui-constants';
|
|
6
|
+
import { colors, spacers, theme, sharedPropTypes } from '@dhis2/ui-constants';
|
|
7
7
|
import cx from 'classnames';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import React, { Component, createRef } from 'react';
|
|
@@ -92,7 +92,7 @@ class Checkbox extends Component {
|
|
|
92
92
|
});
|
|
93
93
|
return /*#__PURE__*/React.createElement("label", {
|
|
94
94
|
"data-test": dataTest,
|
|
95
|
-
className: _JSXStyle.dynamic([["
|
|
95
|
+
className: _JSXStyle.dynamic([["1088888266", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]]) + " " + (cx(className, {
|
|
96
96
|
disabled,
|
|
97
97
|
dense
|
|
98
98
|
}) || "")
|
|
@@ -108,9 +108,9 @@ class Checkbox extends Component {
|
|
|
108
108
|
onFocus: this.handleFocus,
|
|
109
109
|
onKeyDown: this.handleKeyDown,
|
|
110
110
|
onBlur: this.handleBlur,
|
|
111
|
-
className: _JSXStyle.dynamic([["
|
|
111
|
+
className: _JSXStyle.dynamic([["1088888266", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]])
|
|
112
112
|
}), /*#__PURE__*/React.createElement("div", {
|
|
113
|
-
className: _JSXStyle.dynamic([["
|
|
113
|
+
className: _JSXStyle.dynamic([["1088888266", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]]) + " " + (cx('icon', {
|
|
114
114
|
dense
|
|
115
115
|
}) || "")
|
|
116
116
|
}, dense ? /*#__PURE__*/React.createElement(CheckboxDense, {
|
|
@@ -118,9 +118,9 @@ class Checkbox extends Component {
|
|
|
118
118
|
}) : /*#__PURE__*/React.createElement(CheckboxRegular, {
|
|
119
119
|
className: classes
|
|
120
120
|
})), label, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
121
|
-
id: "
|
|
122
|
-
dynamic: [colors.grey900, theme.disabled, theme.focus]
|
|
123
|
-
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer;color:".concat(colors.grey900, ";font-size:
|
|
121
|
+
id: "1088888266",
|
|
122
|
+
dynamic: [colors.grey900, theme.disabled, spacers.dp4, theme.focus]
|
|
123
|
+
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer;color:".concat(colors.grey900, ";font-size:14px;line-height:19px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:18px;left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:".concat(spacers.dp4, ";border:2px solid transparent;padding:1px;border-radius:5px;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:4px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}")]));
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/checkbox",
|
|
3
|
-
"version": "8.7.
|
|
3
|
+
"version": "8.7.1",
|
|
4
4
|
"description": "UI Checkbox",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.1.2",
|
|
35
|
-
"@dhis2-ui/field": "8.7.
|
|
36
|
-
"@dhis2-ui/required": "8.7.
|
|
37
|
-
"@dhis2/ui-constants": "8.7.
|
|
35
|
+
"@dhis2-ui/field": "8.7.1",
|
|
36
|
+
"@dhis2-ui/required": "8.7.1",
|
|
37
|
+
"@dhis2/ui-constants": "8.7.1",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|