@instructure/ui-checkbox 11.7.8 → 11.7.9-snapshot-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.
- package/CHANGELOG.md +8 -0
- package/lib/Checkbox/v1/CheckboxFacade/index.js +4 -4
- package/lib/Checkbox/v1/ToggleFacade/index.js +3 -4
- package/lib/Checkbox/v1/index.js +11 -12
- package/lib/Checkbox/v2/index.js +11 -12
- package/lib/CheckboxGroup/v1/index.js +6 -10
- package/lib/CheckboxGroup/v2/index.js +6 -10
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [11.7.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-checkbox
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
|
|
7
15
|
|
|
8
16
|
### Bug Fixes
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.CheckboxFacade = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
9
|
+
var _uiSvgImages = require("@instructure/ui-svg-images");
|
|
10
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
11
11
|
var _emotion = require("@instructure/emotion");
|
|
12
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
13
13
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -65,7 +65,7 @@ let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_s
|
|
|
65
65
|
}
|
|
66
66
|
renderIcon() {
|
|
67
67
|
if (this.props.indeterminate) {
|
|
68
|
-
return (0, _jsxRuntime.jsx)(
|
|
68
|
+
return (0, _jsxRuntime.jsx)(_uiSvgImages.SVGIcon, {
|
|
69
69
|
viewBox: "0 0 1920 1920",
|
|
70
70
|
inline: false,
|
|
71
71
|
children: (0, _jsxRuntime.jsx)("rect", {
|
|
@@ -76,7 +76,7 @@ let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_s
|
|
|
76
76
|
})
|
|
77
77
|
});
|
|
78
78
|
} else if (this.props.checked) {
|
|
79
|
-
return (0, _jsxRuntime.jsx)(
|
|
79
|
+
return (0, _jsxRuntime.jsx)(_uiIcons.IconCheckMarkSolid, {
|
|
80
80
|
inline: false
|
|
81
81
|
});
|
|
82
82
|
} else {
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.ToggleFacade = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _IconXSolid = require("@instructure/ui-icons/lib/generated/IconXSolid.js");
|
|
9
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
11
10
|
var _emotion = require("@instructure/emotion");
|
|
12
11
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
13
12
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -70,11 +69,11 @@ let ToggleFacade = exports.ToggleFacade = (_dec = (0, _emotion.withStyle)(_style
|
|
|
70
69
|
checked
|
|
71
70
|
} = this.props;
|
|
72
71
|
if (checked) {
|
|
73
|
-
return (0, _jsxRuntime.jsx)(
|
|
72
|
+
return (0, _jsxRuntime.jsx)(_uiIcons.IconCheckSolid, {
|
|
74
73
|
css: styles?.iconSVG
|
|
75
74
|
});
|
|
76
75
|
} else {
|
|
77
|
-
return (0, _jsxRuntime.jsx)(
|
|
76
|
+
return (0, _jsxRuntime.jsx)(_uiIcons.IconXSolid, {
|
|
78
77
|
css: styles?.iconSVG
|
|
79
78
|
});
|
|
80
79
|
}
|
package/lib/Checkbox/v1/index.js
CHANGED
|
@@ -21,11 +21,10 @@ exports.default = void 0;
|
|
|
21
21
|
var _react = require("react");
|
|
22
22
|
var _keycode = _interopRequireDefault(require("keycode"));
|
|
23
23
|
var _v11_ = require("@instructure/ui-form-field/v11_6");
|
|
24
|
-
var
|
|
24
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
25
25
|
var _console = require("@instructure/console");
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
26
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
27
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
29
28
|
var _v11_2 = require("@instructure/ui-view/v11_6");
|
|
30
29
|
var _emotion = require("@instructure/emotion");
|
|
31
30
|
var _index = require("./CheckboxFacade/index.js");
|
|
@@ -64,7 +63,7 @@ category: components
|
|
|
64
63
|
tags: toggle, switch
|
|
65
64
|
---
|
|
66
65
|
**/
|
|
67
|
-
let Checkbox = exports.Checkbox = (_dec = (0,
|
|
66
|
+
let Checkbox = exports.Checkbox = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Checkbox extends _react.Component {
|
|
68
67
|
static displayName = 'Checkbox';
|
|
69
68
|
static componentId = 'Checkbox';
|
|
70
69
|
static allowedProps = _props.allowedProps;
|
|
@@ -167,7 +166,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
167
166
|
return typeof this.props.checked === 'undefined' ? this.state.checked : this.props.checked;
|
|
168
167
|
}
|
|
169
168
|
get focused() {
|
|
170
|
-
return (0,
|
|
169
|
+
return (0, _uiDomUtils.isActiveElement)(this._input);
|
|
171
170
|
}
|
|
172
171
|
get isNewError() {
|
|
173
172
|
return !!this.props.messages?.find(m => m.type === 'newError');
|
|
@@ -259,14 +258,14 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
259
258
|
styles,
|
|
260
259
|
isRequired
|
|
261
260
|
} = this.props;
|
|
262
|
-
const props = (0,
|
|
261
|
+
const props = (0, _uiReactUtils.omitProps)(this.props, Checkbox.allowedProps);
|
|
263
262
|
(0, _console.logError)(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
|
|
264
263
|
return (0, _jsxRuntime.jsx)("div", {
|
|
265
264
|
css: styles?.checkbox
|
|
266
265
|
/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
|
|
267
|
-
onMouseOver: (0,
|
|
266
|
+
onMouseOver: (0, _uiUtils.createChainedFunction)(onMouseOver, this.handleMouseOver)
|
|
268
267
|
/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
|
|
269
|
-
onMouseOut: (0,
|
|
268
|
+
onMouseOut: (0, _uiUtils.createChainedFunction)(onMouseOut, this.handleMouseOut),
|
|
270
269
|
ref: this.handleRef,
|
|
271
270
|
"data-cid": "Checkbox",
|
|
272
271
|
children: (0, _jsxRuntime.jsxs)("div", {
|
|
@@ -283,9 +282,9 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
283
282
|
"aria-invalid": this.invalid ? 'true' : undefined,
|
|
284
283
|
css: styles?.input,
|
|
285
284
|
onChange: this.handleChange,
|
|
286
|
-
onKeyDown: (0,
|
|
287
|
-
onFocus: (0,
|
|
288
|
-
onBlur: (0,
|
|
285
|
+
onKeyDown: (0, _uiUtils.createChainedFunction)(onKeyDown, this.handleKeyDown),
|
|
286
|
+
onFocus: (0, _uiUtils.createChainedFunction)(onFocus, this.handleFocus),
|
|
287
|
+
onBlur: (0, _uiUtils.createChainedFunction)(onBlur, this.handleBlur),
|
|
289
288
|
checked: this.checked
|
|
290
289
|
}), (0, _jsxRuntime.jsxs)("label", {
|
|
291
290
|
htmlFor: this.id,
|
package/lib/Checkbox/v2/index.js
CHANGED
|
@@ -21,11 +21,10 @@ exports.default = void 0;
|
|
|
21
21
|
var _react = require("react");
|
|
22
22
|
var _keycode = _interopRequireDefault(require("keycode"));
|
|
23
23
|
var _latest = require("@instructure/ui-form-field/latest");
|
|
24
|
-
var
|
|
24
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
25
25
|
var _console = require("@instructure/console");
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
26
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
27
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
29
28
|
var _latest2 = require("@instructure/ui-view/latest");
|
|
30
29
|
var _emotion = require("@instructure/emotion");
|
|
31
30
|
var _index = require("./CheckboxFacade/index.js");
|
|
@@ -63,7 +62,7 @@ category: components
|
|
|
63
62
|
tags: toggle, switch
|
|
64
63
|
---
|
|
65
64
|
**/
|
|
66
|
-
let Checkbox = exports.Checkbox = (_dec = (0,
|
|
65
|
+
let Checkbox = exports.Checkbox = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Checkbox extends _react.Component {
|
|
67
66
|
static displayName = 'Checkbox';
|
|
68
67
|
static componentId = 'Checkbox';
|
|
69
68
|
static allowedProps = _props.allowedProps;
|
|
@@ -170,7 +169,7 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
170
169
|
return typeof this.props.checked === 'undefined' ? this.state.checked : this.props.checked;
|
|
171
170
|
}
|
|
172
171
|
get focused() {
|
|
173
|
-
return (0,
|
|
172
|
+
return (0, _uiDomUtils.isActiveElement)(this._input);
|
|
174
173
|
}
|
|
175
174
|
get isError() {
|
|
176
175
|
return !!this.props.messages?.find(m => m.type === 'error' || m.type === 'newError');
|
|
@@ -276,14 +275,14 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
276
275
|
styles,
|
|
277
276
|
isRequired
|
|
278
277
|
} = this.props;
|
|
279
|
-
const props = (0,
|
|
278
|
+
const props = (0, _uiReactUtils.omitProps)(this.props, Checkbox.allowedProps);
|
|
280
279
|
(0, _console.logError)(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
|
|
281
280
|
return (0, _jsxRuntime.jsx)("div", {
|
|
282
281
|
css: styles?.checkbox
|
|
283
282
|
/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
|
|
284
|
-
onMouseOver: (0,
|
|
283
|
+
onMouseOver: (0, _uiUtils.createChainedFunction)(onMouseOver, this.handleMouseOver)
|
|
285
284
|
/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
|
|
286
|
-
onMouseOut: (0,
|
|
285
|
+
onMouseOut: (0, _uiUtils.createChainedFunction)(onMouseOut, this.handleMouseOut),
|
|
287
286
|
ref: this.handleRef,
|
|
288
287
|
"data-cid": "Checkbox",
|
|
289
288
|
children: (0, _jsxRuntime.jsxs)("div", {
|
|
@@ -315,9 +314,9 @@ let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
315
314
|
}
|
|
316
315
|
},
|
|
317
316
|
onChange: this.handleChange,
|
|
318
|
-
onKeyDown: (0,
|
|
319
|
-
onFocus: (0,
|
|
320
|
-
onBlur: (0,
|
|
317
|
+
onKeyDown: (0, _uiUtils.createChainedFunction)(onKeyDown, this.handleKeyDown),
|
|
318
|
+
onFocus: (0, _uiUtils.createChainedFunction)(onFocus, this.handleFocus),
|
|
319
|
+
onBlur: (0, _uiUtils.createChainedFunction)(onBlur, this.handleBlur),
|
|
321
320
|
checked: this.checked
|
|
322
321
|
}), (0, _jsxRuntime.jsxs)("label", {
|
|
323
322
|
htmlFor: this.id,
|
|
@@ -6,11 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.CheckboxGroup = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _v11_ = require("@instructure/ui-form-field/v11_6");
|
|
9
|
-
var
|
|
10
|
-
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
11
|
-
var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
|
|
12
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
13
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
14
10
|
var _index = require("../../Checkbox/v1/index.js");
|
|
15
11
|
var _props = require("./props.js");
|
|
16
12
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -43,7 +39,7 @@ var _dec, _class;
|
|
|
43
39
|
category: components
|
|
44
40
|
---
|
|
45
41
|
**/
|
|
46
|
-
let CheckboxGroup = exports.CheckboxGroup = (_dec = (0,
|
|
42
|
+
let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec(_class = class CheckboxGroup extends _react.Component {
|
|
47
43
|
static displayName = 'CheckboxGroup';
|
|
48
44
|
static componentId = 'CheckboxGroup';
|
|
49
45
|
static allowedProps = _props.allowedProps;
|
|
@@ -103,8 +99,8 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.wit
|
|
|
103
99
|
readOnly
|
|
104
100
|
} = this.props;
|
|
105
101
|
return _react.Children.map(children, child => {
|
|
106
|
-
if ((0,
|
|
107
|
-
return (0,
|
|
102
|
+
if ((0, _uiReactUtils.matchComponentTypes)(child, [_index.Checkbox])) {
|
|
103
|
+
return (0, _uiReactUtils.safeCloneElement)(child, {
|
|
108
104
|
key: `${child.props.name}`,
|
|
109
105
|
name,
|
|
110
106
|
label: child.props.label,
|
|
@@ -123,8 +119,8 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.wit
|
|
|
123
119
|
}
|
|
124
120
|
render() {
|
|
125
121
|
return (0, _jsxRuntime.jsx)(_v11_.FormFieldGroup, {
|
|
126
|
-
...(0,
|
|
127
|
-
...(0,
|
|
122
|
+
...(0, _uiReactUtils.omitProps)(this.props, CheckboxGroup.allowedProps),
|
|
123
|
+
...(0, _uiReactUtils.pickProps)(this.props, _v11_.FormFieldGroup.allowedProps),
|
|
128
124
|
description: this.props.description,
|
|
129
125
|
rowSpacing: "small",
|
|
130
126
|
vAlign: "top",
|
|
@@ -6,11 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.CheckboxGroup = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _latest = require("@instructure/ui-form-field/latest");
|
|
9
|
-
var
|
|
10
|
-
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
11
|
-
var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
|
|
12
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
13
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
14
10
|
var _index = require("../../Checkbox/v2/index.js");
|
|
15
11
|
var _props = require("./props.js");
|
|
16
12
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -43,7 +39,7 @@ var _dec, _class;
|
|
|
43
39
|
category: components
|
|
44
40
|
---
|
|
45
41
|
**/
|
|
46
|
-
let CheckboxGroup = exports.CheckboxGroup = (_dec = (0,
|
|
42
|
+
let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec(_class = class CheckboxGroup extends _react.Component {
|
|
47
43
|
static displayName = 'CheckboxGroup';
|
|
48
44
|
static componentId = 'CheckboxGroup';
|
|
49
45
|
static allowedProps = _props.allowedProps;
|
|
@@ -103,8 +99,8 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.wit
|
|
|
103
99
|
readOnly
|
|
104
100
|
} = this.props;
|
|
105
101
|
return _react.Children.map(children, child => {
|
|
106
|
-
if ((0,
|
|
107
|
-
return (0,
|
|
102
|
+
if ((0, _uiReactUtils.matchComponentTypes)(child, [_index.Checkbox])) {
|
|
103
|
+
return (0, _uiReactUtils.safeCloneElement)(child, {
|
|
108
104
|
key: `${child.props.name}`,
|
|
109
105
|
name,
|
|
110
106
|
label: child.props.label,
|
|
@@ -123,8 +119,8 @@ let CheckboxGroup = exports.CheckboxGroup = (_dec = (0, _withDeterministicId.wit
|
|
|
123
119
|
}
|
|
124
120
|
render() {
|
|
125
121
|
return (0, _jsxRuntime.jsx)(_latest.FormFieldGroup, {
|
|
126
|
-
...(0,
|
|
127
|
-
...(0,
|
|
122
|
+
...(0, _uiReactUtils.omitProps)(this.props, CheckboxGroup.allowedProps),
|
|
123
|
+
...(0, _uiReactUtils.pickProps)(this.props, _latest.FormFieldGroup.allowedProps),
|
|
128
124
|
description: this.props.description,
|
|
129
125
|
rowSpacing: "small",
|
|
130
126
|
vAlign: "top",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-checkbox",
|
|
3
|
-
"version": "11.7.
|
|
3
|
+
"version": "11.7.9-snapshot-1",
|
|
4
4
|
"description": " styled HTML input type='checkbox' component.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -16,24 +16,24 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
18
|
"keycode": "^2",
|
|
19
|
-
"@instructure/console": "11.7.
|
|
20
|
-
"@instructure/
|
|
21
|
-
"@instructure/
|
|
22
|
-
"@instructure/ui-
|
|
23
|
-
"@instructure/
|
|
24
|
-
"@instructure/ui-
|
|
25
|
-
"@instructure/ui-
|
|
26
|
-
"@instructure/ui-
|
|
27
|
-
"@instructure/ui-
|
|
28
|
-
"@instructure/ui-
|
|
29
|
-
"@instructure/
|
|
30
|
-
"@instructure/
|
|
19
|
+
"@instructure/console": "11.7.9-snapshot-1",
|
|
20
|
+
"@instructure/emotion": "11.7.9-snapshot-1",
|
|
21
|
+
"@instructure/shared-types": "11.7.9-snapshot-1",
|
|
22
|
+
"@instructure/ui-dom-utils": "11.7.9-snapshot-1",
|
|
23
|
+
"@instructure/ui-form-field": "11.7.9-snapshot-1",
|
|
24
|
+
"@instructure/ui-icons": "11.7.9-snapshot-1",
|
|
25
|
+
"@instructure/ui-themes": "11.7.9-snapshot-1",
|
|
26
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-1",
|
|
27
|
+
"@instructure/ui-utils": "11.7.9-snapshot-1",
|
|
28
|
+
"@instructure/ui-svg-images": "11.7.9-snapshot-1",
|
|
29
|
+
"@instructure/ui-view": "11.7.9-snapshot-1",
|
|
30
|
+
"@instructure/uid": "11.7.9-snapshot-1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"vitest": "^5.0.0",
|
|
34
|
-
"@instructure/ui-axe-check": "11.7.
|
|
35
|
-
"@instructure/ui-babel-preset": "11.7.
|
|
36
|
-
"@instructure/ui-color-utils": "11.7.
|
|
34
|
+
"@instructure/ui-axe-check": "11.7.9-snapshot-1",
|
|
35
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-1",
|
|
36
|
+
"@instructure/ui-color-utils": "11.7.9-snapshot-1"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"react": ">=18 <=19"
|