@cypress-design/react-docmenu 0.2.3 → 0.3.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 17.1s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 22.3s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-docmenu
 
+## 0.3.0
+
+### Minor Changes
+
+- [#272](https://github.com/cypress-io/cypress-design/pull/272) [`9a3e358`](https://github.com/cypress-io/cypress-design/commit/9a3e3582b8ca2dfdadd9198054042c9f0083be01) Thanks [@elevatebart](https://github.com/elevatebart)! - remove dark mode implementation to avoid wrong side effects
+
 ## 0.2.3
 
 ### Patch Changes

package/_DocGroup.tsx

@@ -60,7 +60,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
         onClick={() => toggleMenu(!open)}
         href={group.href}
         className={clsx(classes.button, {
-          'text-indigo-500 dark:text-indigo-200': group.active,
+          'text-indigo-500': group.active,
           [classes.topButton]: depth === 0,
           [classes.leafButton]: depth,
         })}

package/_DocLink.tsx

@@ -34,7 +34,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
     >
       <a
         className={clsx('group relative inline-block pl-[24px]', {
-          'text-indigo-500 dark:text-indigo-200': item.active,
+          'text-indigo-500': item.active,
           'py-[8px] text-[16px] leading-[24px]': depth < 0,
           'py-[12px] leading-[20px] text-[14px]': depth >= 0,
         })}

package/dist/index.es.mjs

@@ -68,7 +68,7 @@ var DocLink = function (_a) {
             'pl-[16px]': depth >= 0,
         }) },
         React.createElement("a", { className: clsx('group relative inline-block pl-[24px]', {
-                'text-indigo-500 dark:text-indigo-200': item.active,
+                'text-indigo-500': item.active,
                 'py-[8px] text-[16px] leading-[24px]': depth < 0,
                 'py-[12px] leading-[20px] text-[14px]': depth >= 0,
             }), href: item.href },
@@ -121,7 +121,7 @@ function __rest(s, 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, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
         if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
             attrName !== 'name') {
@@ -132,6 +132,20 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
+    React.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]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
             __html: body,
         }, className: undefined }, filteredAttributes);
@@ -143,21 +157,27 @@ var compileReactIconProperties = function (_a) {
     }
     return componentProps;
 };
-var IconChevronDownSmall = function (props) {
-    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["8", "16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
-    var iconBodies = {
-        "8": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 2.5 3 3 3-3\" class=\"icon-dark\"/>",
-        "16": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 6 4 4 4-4\" class=\"icon-dark\"/>"
-    };
-    var body = iconBodies[size];
+
+function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
+    var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
+    var _a = iconsRegistry.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 \"chevron-down-small\" is not available in size ".concat(size));
+        throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
     }
-    return React.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 IconChevronDownSmall = function (props) { return React.createElement('svg', useIconProps(props, {
+    "8": {
+        "body": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 2.5 3 3 3-3\" class=\"icon-dark\"/>"
+    },
+    "16": {
+        "body": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 6 4 4 4-4\" class=\"icon-dark\"/>"
+    }
+}, ["8", "16"], "chevron-down-small")); };
 
 
-/* <wind-keep class="filter"> */
+/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
 
 const classes = {
     button: 'flex leading-[24px] py-[10px] items-center relative w-full',
@@ -195,7 +215,7 @@ var DocGroup = function (_a) {
     var Head = collapsible ? 'button' : group.href ? 'a' : 'div';
     return (React.createElement(React.Fragment, null,
         React.createElement(Head, { onClick: function () { return toggleMenu(!open); }, href: group.href, className: clsx(classes.button, (_b = {
-                    'text-indigo-500 dark:text-indigo-200': group.active
+                    'text-indigo-500': group.active
                 },
                 _b[classes.topButton] = depth === 0,
                 _b[classes.leafButton] = depth,
@@ -233,4 +253,4 @@ var DocMenu = function (_a) {
 export { DocMenu as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="list-none p-0 relative pl-[16px] inline-block pl-[24px] text-indigo-500 dark:text-indigo-200 py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden group-hover:block bg-gray-300 text-indigo-200 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] h-[36px] bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px] ml-[8px] border-l border-gray-100 flex py-[10px] items-center w-full font-medium pl-[40px]"> */
+/* <wind-keep class="list-none p-0 relative pl-[16px] inline-block pl-[24px] text-indigo-500 py-[8px] text-[16px] leading-[24px] py-[12px] leading-[20px] text-[14px] absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden group-hover:block bg-gray-300 transform transition-transform left-0 rotate-0 -rotate-90 ml-[16px] h-[36px] bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px] ml-[8px] border-l border-gray-100 flex py-[10px] items-center w-full font-medium pl-[40px]"> */