@cypress-design/react-docmenu 0.2.3 → 0.3.1

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 33.9s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @cypress-design/react-docmenu
 
+## 0.3.1
+
+### Patch Changes
+
+- [#310](https://github.com/cypress-io/cypress-design/pull/310) [`a3a323f`](https://github.com/cypress-io/cypress-design/commit/a3a323fde7acf5e5407b298b4faa0c90314c6139) Thanks [@elevatebart](https://github.com/elevatebart)! - Add-eslint-react-hooks
+
+- Updated dependencies [[`630ad4a`](https://github.com/cypress-io/cypress-design/commit/630ad4ae2e6ba65350951949767a4ebdc4c7eb0a), [`a3a323f`](https://github.com/cypress-io/cypress-design/commit/a3a323fde7acf5e5407b298b4faa0c90314c6139)]:
+  - @cypress-design/react-icon@0.24.0
+
+## 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

@@ -19,25 +19,25 @@ export const DocGroup: React.FC<DocGroupProps> = ({
 }) => {
   const [open, setOpen] = React.useState(depth === 0)
   const [itemsHeights, setItemsHeights] = React.useState<number[]>(
-    Array(group.items.length).fill(1)
+    Array(group.items.length).fill(1),
   )
 
   React.useEffect(() => {
     setHeight?.(open ? itemsHeights.reduce((a, b) => a + b, 1) : 1)
-  }, [itemsHeights, open])
+  }, [itemsHeights, open, setHeight])
 
   const [activeTop, setActiveTop] = React.useState(0)
 
   React.useEffect(() => {
     const activeItem = group.items.findIndex(
-      (item) => 'href' in item && item.active
+      (item) => 'href' in item && item.active,
     )
     if (activeItem >= 0) {
       setActiveTop(
-        itemsHeights.slice(0, activeItem).reduce((a, b) => a + b, 1) * 44
+        itemsHeights.slice(0, activeItem).reduce((a, b) => a + b, 1) * 44,
       )
     }
-  }, [itemsHeights])
+  }, [itemsHeights, group.items])
 
   function toggleMenu(open: boolean) {
     if (!collapsible) return
@@ -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,
         })}
@@ -114,7 +114,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
               depth={depth}
               onActive={(top) => setActiveTop(top)}
             />
-          )
+          ),
         )}
       </ul>
     </>

package/_DocLink.tsx

@@ -23,6 +23,8 @@ export const DocLink: React.FC<DocLinkProps> = ({
     if (item.active) {
       onActive?.(activeLIRef?.current?.offsetTop || 0)
     }
+    // supposed to happen only on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (
@@ -34,7 +36,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,
         })}
@@ -46,7 +48,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
               'absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden',
               {
                 'group-hover:block bg-gray-300': !item.active && collapsible,
-              }
+              },
             )}
             style={{
               left: `-${18.5 + depth * 8}px`,

package/dist/_DocLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgD1C,CAAA"}
+{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkD1C,CAAA"}

package/dist/index.es.mjs

@@ -17,7 +17,7 @@ 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 */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign$1 = function() {
@@ -51,7 +51,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
+}
+
+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 DocLink = function (_a) {
     var item = _a.item, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? -1 : _b, onActive = _a.onActive;
@@ -63,12 +68,14 @@ var DocLink = function (_a) {
         if (item.active) {
             onActive === null || onActive === void 0 ? void 0 : onActive(((_a = activeLIRef === null || activeLIRef === void 0 ? void 0 : activeLIRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0);
         }
+        // supposed to happen only on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (React.createElement("li", { ref: activeLIRef, className: clsx('list-none p-0', {
             '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 },
@@ -94,7 +101,7 @@ 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 */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -118,10 +125,15 @@ 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, 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 +144,21 @@ var compileReactIconProperties = function (_a) {
         }
         return newAttributes;
     }, {});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    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, name, size]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
             __html: body,
         }, className: undefined }, filteredAttributes);
@@ -143,21 +170,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',
@@ -172,14 +205,14 @@ var DocGroup = function (_a) {
     var _e = React.useState(Array(group.items.length).fill(1)), itemsHeights = _e[0], setItemsHeights = _e[1];
     React.useEffect(function () {
         setHeight === null || setHeight === void 0 ? void 0 : setHeight(open ? itemsHeights.reduce(function (a, b) { return a + b; }, 1) : 1);
-    }, [itemsHeights, open]);
+    }, [itemsHeights, open, setHeight]);
     var _f = React.useState(0), activeTop = _f[0], setActiveTop = _f[1];
     React.useEffect(function () {
         var activeItem = group.items.findIndex(function (item) { return 'href' in item && item.active; });
         if (activeItem >= 0) {
             setActiveTop(itemsHeights.slice(0, activeItem).reduce(function (a, b) { return a + b; }, 1) * 44);
         }
-    }, [itemsHeights]);
+    }, [itemsHeights, group.items]);
     function toggleMenu(open) {
         if (!collapsible)
             return;
@@ -195,7 +228,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 +266,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]"> */