@cypress-design/react-checkbox 1.0.0 → 1.0.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/.turbo/turbo-build.log +3 -1
- package/CHANGELOG.md +15 -0
- package/dist/index.es.mjs +3 -110
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +4 -111
- package/dist/index.umd.js.map +1 -1
- package/package.json +3 -3
- package/rollup.config.mjs +5 -1
package/dist/index.umd.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var
|
|
5
|
+
var reactIcon = require('@cypress-design/react-icon');
|
|
6
6
|
|
|
7
7
|
function _interopNamespaceDefault(e) {
|
|
8
8
|
var n = Object.create(null);
|
|
@@ -22,52 +22,6 @@ function _interopNamespaceDefault(e) {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
|
-
var iconsRegistry__namespace = /*#__PURE__*/_interopNamespaceDefault(iconsRegistry);
|
|
26
|
-
|
|
27
|
-
/******************************************************************************
|
|
28
|
-
Copyright (c) Microsoft Corporation.
|
|
29
|
-
|
|
30
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
31
|
-
purpose with or without fee is hereby granted.
|
|
32
|
-
|
|
33
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
34
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
35
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
36
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
37
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
38
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
39
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
40
|
-
***************************************************************************** */
|
|
41
|
-
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var __assign$1 = function() {
|
|
45
|
-
__assign$1 = Object.assign || function __assign(t) {
|
|
46
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
47
|
-
s = arguments[i];
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
49
|
-
}
|
|
50
|
-
return t;
|
|
51
|
-
};
|
|
52
|
-
return __assign$1.apply(this, arguments);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
function __rest$1(s, e) {
|
|
56
|
-
var t = {};
|
|
57
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
58
|
-
t[p] = s[p];
|
|
59
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
60
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
61
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
62
|
-
t[p[i]] = s[p[i]];
|
|
63
|
-
}
|
|
64
|
-
return t;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
68
|
-
var e = new Error(message);
|
|
69
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
70
|
-
};
|
|
71
25
|
|
|
72
26
|
/******************************************************************************
|
|
73
27
|
Copyright (c) Microsoft Corporation.
|
|
@@ -114,67 +68,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
114
68
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
115
69
|
};
|
|
116
70
|
|
|
117
|
-
var compileReactIconProperties = function (_a) {
|
|
118
|
-
var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
|
|
119
|
-
var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
|
|
120
|
-
if (!iconsRegistry.ICON_COLOR_PROP_NAMES.includes(attrName) &&
|
|
121
|
-
attrName !== 'name') {
|
|
122
|
-
// @ts-expect-error the ky of React's SVGProps is too broad and
|
|
123
|
-
// breaks here. Since we do not need to check for it. We keep the expect error
|
|
124
|
-
newAttributes[attrName] =
|
|
125
|
-
attributes[attrName];
|
|
126
|
-
}
|
|
127
|
-
return newAttributes;
|
|
128
|
-
}, {});
|
|
129
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
130
|
-
React__namespace.useEffect(function () {
|
|
131
|
-
var iconFileId = "".concat(name, "_").concat(size);
|
|
132
|
-
if (defs) {
|
|
133
|
-
if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
137
|
-
svgElement.setAttribute('data-cy-svg-defs', iconFileId);
|
|
138
|
-
svgElement.setAttribute('width', '0');
|
|
139
|
-
svgElement.setAttribute('height', '0');
|
|
140
|
-
svgElement.innerHTML = defs;
|
|
141
|
-
document.body.appendChild(svgElement);
|
|
142
|
-
}
|
|
143
|
-
}, [defs, name, size]);
|
|
144
|
-
var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
|
|
145
|
-
__html: alt
|
|
146
|
-
? "<title>".concat(alt.replace(/[><]/g, function (s) {
|
|
147
|
-
return s === '>' ? '>' : '<';
|
|
148
|
-
}), "</title>").concat(body)
|
|
149
|
-
: body,
|
|
150
|
-
}, className: undefined }, filteredAttributes);
|
|
151
|
-
if (attributes.className) {
|
|
152
|
-
compiledClasses.push(attributes.className);
|
|
153
|
-
}
|
|
154
|
-
if (compiledClasses.length) {
|
|
155
|
-
componentProps.className = compiledClasses.join(' ');
|
|
156
|
-
}
|
|
157
|
-
return componentProps;
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
|
|
161
|
-
var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
|
|
162
|
-
var _a = iconsRegistry__namespace.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
|
|
163
|
-
var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
|
|
164
|
-
if (!body) {
|
|
165
|
-
throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
|
|
166
|
-
}
|
|
167
|
-
return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
|
|
168
|
-
}
|
|
169
|
-
var IconCheckmarkSmall = function (props) { return React__namespace.createElement('svg', useIconProps(props, {
|
|
170
|
-
"16": {
|
|
171
|
-
"body": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
|
|
172
|
-
}
|
|
173
|
-
}, ["16"], "checkmark-small")); };
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
|
|
177
|
-
|
|
178
71
|
const Classes = {
|
|
179
72
|
wrapper: 'relative flex items-center',
|
|
180
73
|
hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',
|
|
@@ -194,18 +87,18 @@ var uid = function () {
|
|
|
194
87
|
return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
|
|
195
88
|
};
|
|
196
89
|
var Checkbox = function (_a) {
|
|
197
|
-
var _b = _a.id, id = _b === void 0 ? uid() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, className = _a.className, name = _a.name, rest = __rest
|
|
90
|
+
var _b = _a.id, id = _b === void 0 ? uid() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, className = _a.className, name = _a.name, rest = __rest(_a, ["id", "checked", "onChange", "color", "label", "disabled", "className", "name"]);
|
|
198
91
|
var _e = React__namespace.useState(checked), localChecked = _e[0], setChecked = _e[1];
|
|
199
92
|
function onChangeInput(event) {
|
|
200
93
|
setChecked(!localChecked);
|
|
201
94
|
onChange(event);
|
|
202
95
|
}
|
|
203
|
-
return (React__namespace.createElement("span", __assign
|
|
96
|
+
return (React__namespace.createElement("span", __assign({ className: clsx(className, Classes.wrapper) }, rest),
|
|
204
97
|
React__namespace.createElement("input", { id: id, className: Classes.hiddenInput, "aria-describedby": "".concat(id, "-description"), name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
|
|
205
98
|
React__namespace.createElement("label", { className: Classes.labelTag, htmlFor: id },
|
|
206
99
|
localChecked && (
|
|
207
100
|
// <tw-keep strokeColor="white"/>
|
|
208
|
-
React__namespace.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
|
|
101
|
+
React__namespace.createElement(reactIcon.IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
|
|
209
102
|
React__namespace.createElement("span", { className: clsx([
|
|
210
103
|
Classes.visibleCheckbox,
|
|
211
104
|
disabled
|