@cypress-design/react-docmenu 0.2.2 → 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 20.5s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 22.3s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
+
+- Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
+  - @cypress-design/react-icon@0.22.1
+
 ## 0.2.2
 
 ### 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

@@ -17,6 +17,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 */
+
 
 var __assign$1 = function() {
     __assign$1 = Object.assign || function __assign(t) {
@@ -66,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 },
@@ -92,6 +94,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 */
+
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -117,17 +121,34 @@ 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') {
+        if (!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;
     }, {});
+    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,
-        } }, filteredAttributes);
+        }, className: undefined }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
     }
@@ -136,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=""> */
+/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
 
 const classes = {
     button: 'flex leading-[24px] py-[10px] items-center relative w-full',
@@ -188,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,
@@ -226,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 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]"> */