@cypress-design/react-checkbox 0.5.0 → 1.0.0

package/dist/index.umd.js

@@ -4,10 +4,7 @@ var clsx = require('clsx');
 var React = require('react');
 var iconsRegistry = require('@cypress-design/icon-registry');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -20,13 +17,12 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var iconsRegistry__namespace = /*#__PURE__*/_interopNamespace(iconsRegistry);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var iconsRegistry__namespace = /*#__PURE__*/_interopNamespaceDefault(iconsRegistry);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -42,6 +38,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 var __assign$1 = function() {
     __assign$1 = Object.assign || function __assign(t) {
@@ -64,7 +62,12 @@ function __rest$1(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -80,6 +83,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -102,20 +107,47 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    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"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
-        if (!iconsRegistry.ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
+        if (!iconsRegistry.ICON_COLOR_PROP_NAMES.includes(attrName) &&
+            attrName !== 'name') {
+            // @ts-expect-error the ky of React's SVGProps is too broad and
+            // breaks here. Since we do not need to check for it. We keep the expect error
             newAttributes[attrName] =
                 attributes[attrName];
         }
         return newAttributes;
     }, {});
-    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
-            __html: body
-        } }, filteredAttributes);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React__namespace.useEffect(function () {
+        var iconFileId = "".concat(name, "_").concat(size);
+        if (defs) {
+            if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
+                return;
+            }
+            var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgElement.setAttribute('data-cy-svg-defs', iconFileId);
+            svgElement.setAttribute('width', '0');
+            svgElement.setAttribute('height', '0');
+            svgElement.innerHTML = defs;
+            document.body.appendChild(svgElement);
+        }
+    }, [defs, name, size]);
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
+            __html: alt
+                ? "<title>".concat(alt.replace(/[><]/g, function (s) {
+                    return s === '>' ? '&gt;' : '&lt;';
+                }), "</title>").concat(body)
+                : body,
+        }, className: undefined }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
     }
@@ -124,19 +156,39 @@ var compileReactIconProperties = function (_a) {
     }
     return componentProps;
 };
-var IconCheckmarkSmall = function (props) {
-    var _a = iconsRegistry__namespace.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
-    var iconBodies = {
-        "16": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
-    };
-    var body = iconBodies[size];
+
+function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
+    var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
+    var _a = iconsRegistry__namespace.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
     if (!body) {
-        throw Error("Icon \"checkmark-small\" is not available in size " + size);
+        throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
     }
-    return React__namespace.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
-};
+    return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
+}
+var IconCheckmarkSmall = function (props) { return React__namespace.createElement('svg', useIconProps(props, {
+    "16": {
+        "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\"/>"
+    }
+}, ["16"], "checkmark-small")); };
+
 
-/* <windicss-keep class=""> */
+/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
+
+const Classes = {
+    wrapper: 'relative flex items-center',
+    hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',
+    labelTag: 'flex items-center',
+    visibleCheckbox: 'border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white',
+    trueLabel: 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
+};
+const CheckboxColors = {
+    indigo: 'border-indigo-500 bg-indigo-400',
+    jade: 'border-jade-500 bg-jade-400',
+    red: 'border-red-500 bg-red-400',
+    disabled: 'border-gray-200 bg-gray-100',
+    empty: 'border-gray-200 bg-white',
+};
 
 var uid = function () {
     return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
@@ -148,31 +200,27 @@ var Checkbox = function (_a) {
         setChecked(!localChecked);
         onChange(event);
     }
-    return (React__namespace.createElement("span", __assign$1({ className: clsx__default["default"](className, 'block relative flex items-center') }, rest),
-        React__namespace.createElement("input", { id: id, className: "absolute inset-0 w-0 h-0 opacity-0", "aria-describedby": id + "-description", name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
-        React__namespace.createElement("label", { className: "flex items-center", htmlFor: id },
+    return (React__namespace.createElement("span", __assign$1({ className: clsx(className, Classes.wrapper) }, rest),
+        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 }),
+        React__namespace.createElement("label", { className: Classes.labelTag, htmlFor: id },
             localChecked && (
-            // <windi-keep strokeColor="white"/>
+            // <tw-keep strokeColor="white"/>
             React__namespace.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
-            React__namespace.createElement("span", { className: clsx__default["default"]([
-                    "block border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",
+            React__namespace.createElement("span", { className: clsx([
+                    Classes.visibleCheckbox,
                     disabled
-                        ? 'border-gray-200 bg-gray-100'
+                        ? CheckboxColors.disabled
                         : localChecked
-                            ? {
-                                'border-indigo-500 bg-indigo-400': color === 'indigo',
-                                'border-jade-500 bg-jade-400': color === 'jade',
-                                'border-red-500 bg-red-400': color === 'red'
-                            }
-                            : 'border-gray-200 bg-white',
+                            ? CheckboxColors[color]
+                            : CheckboxColors.empty,
                 ]) }),
-            label && (React__namespace.createElement("span", { className: clsx__default["default"]([
+            label && (React__namespace.createElement("span", { className: clsx([
                     disabled ? 'text-gray-500' : 'text-gray-800',
-                    'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
+                    Classes.trueLabel,
                 ]) }, label)))));
 };
 
 module.exports = Checkbox;
-
-/* <windicss-keep class="block relative flex items-center absolute inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white text-gray-500 text-gray-800 ml-[8px] text-[16px] leading-[24px] font-light select-none icon-dark-white"> */
 //# sourceMappingURL=index.umd.js.map
+
+/* <wind-keep class="absolute text-gray-500 text-gray-800 icon-dark-white relative flex items-center inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white block ml-[8px] text-[16px] leading-[24px] font-light select-none border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 border-gray-200 bg-gray-100 bg-white"> */