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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-docmenu
 
+## 0.5.1
+
+### Patch Changes
+
+- [`171cf54`](https://github.com/cypress-io/cypress-design/commit/171cf546bd79e96b8ef140b2af34d1949d022a4b) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: make docmenu transition properly
+
 ## 0.5.0
 
 ### Minor Changes

package/_DocGroup.tsx

@@ -13,18 +13,6 @@ import {
 } from './_DocLink'
 import { MarkerIsMovingContext } from './markerIsMoving'
 
-const useIsMounted = () => {
-  const isMounted = React.useRef(false)
-
-  React.useEffect(() => {
-    isMounted.current = true
-    return () => {
-      isMounted.current = false
-    }
-  }, [])
-  return isMounted
-}
-
 export interface DocGroupProps {
   group: NavGroup
   activePath: string
@@ -57,11 +45,12 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
     const [open, setOpen] = React.useState(group.collapsed !== true)
     const $groupElements = React.useRef<DocGroupElementsForward>(null)
     const $listWrapper = React.useRef<HTMLDivElement>(null)
-    const didMount = useIsMounted()
 
     function toggleMenu(open: boolean) {
       if (!collapsible) return
       setOpen(open)
+      hideShowAbsoluteMarker()
+      readjustMarkerPosition()
     }
 
     const hasActiveItemRecursively = React.useCallback(
@@ -93,53 +82,42 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
       $groupElements.current?.reTriggerSetActiveGroup()
     }
 
-    React.useEffect(() => {
-      if (didMount.current) {
-        $listWrapper.current?.addEventListener(
-          'transitionstart',
-          () => {
-            setMarkerIsMoving(true)
-          },
-          { once: true },
-        )
-        $listWrapper.current?.addEventListener(
-          'transitionend',
-          () => {
-            setMarkerIsMoving(false)
-            if (open || !hasActiveItemRecursively()) {
-              updateMarkerPosition?.()
-            }
-          },
-          { once: true },
-        )
-      }
-    }, [
-      open,
-      setMarkerIsMoving,
-      updateMarkerPosition,
-      hasActiveItemRecursively,
-      didMount,
-    ])
-
-    React.useEffect(() => {
-      if (didMount.current) {
-        if (hasActiveItemRecursively()) {
-          if (open) {
-            reTriggerSetActiveGroupParent()
-          } else {
-            hideMarker()
+    /**
+     * To make the marker follow smooth open/close animation of the menu groups
+     * We replace the absolute marker by one in the link. After the transition, the
+     * marker is replaced by the absolute one again.
+     */
+    function hideShowAbsoluteMarker() {
+      $listWrapper.current?.addEventListener(
+        'transitionstart',
+        () => {
+          setMarkerIsMoving(true)
+        },
+        { once: true },
+      )
+      $listWrapper.current?.addEventListener(
+        'transitionend',
+        () => {
+          if (open || !hasActiveItemRecursively()) {
+            updateMarkerPosition?.()
           }
+          setMarkerIsMoving(false)
+        },
+        { once: true },
+      )
+    }
+
+    function readjustMarkerPosition() {
+      if (hasActiveItemRecursively()) {
+        if (open) {
+          reTriggerSetActiveGroupParent()
         } else {
-          updateMarkerPosition?.()
+          hideMarker()
         }
+      } else {
+        updateMarkerPosition?.()
       }
-    }, [
-      open,
-      updateMarkerPosition,
-      hideMarker,
-      hasActiveItemRecursively,
-      didMount,
-    ])
+    }
 
     React.useImperativeHandle(ref, () => ({
       reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,

package/_DocLink.tsx

@@ -30,9 +30,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
   ) => {
     const activeLIRef = React.useRef<HTMLLIElement>(null)
 
-    const { markerIsMoving, setMarkerIsMoving } = React.useContext(
-      MarkerIsMovingContext,
-    )
+    const { markerIsMoving } = React.useContext(MarkerIsMovingContext)
 
     const setActiveMarkerPosition = () => {
       if (active) {
@@ -47,11 +45,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
 
     // on mount, if the item is active,
     // send the top position to the parent
-    React.useEffect(setActiveMarkerPosition, [
-      onActive,
-      active,
-      setMarkerIsMoving,
-    ])
+    React.useEffect(setActiveMarkerPosition, [onActive, active])
 
     React.useImperativeHandle(ref, () => ({
       setActiveMarkerPosition,

package/dist/_DocGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAenB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,QAAQ,uFAmKpB,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGA6G5B,CAAA"}
+{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAGnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,QAAQ,uFAyJpB,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGA6G5B,CAAA"}

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;AAG/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1D,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFAiEnB,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;AAG/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1D,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFA2DnB,CAAA"}

package/dist/index.es.mjs

@@ -170,7 +170,7 @@ var MarkerIsMovingContext = createContext({
 var DocLink = React.forwardRef(function (_a, ref) {
     var item = _a.item, active = _a.active, collapsible = _a.collapsible, _b = _a.depth, depth = _b === void 0 ? -1 : _b, onActive = _a.onActive, _c = _a.LinkComponent, LinkComponent = _c === void 0 ? 'a' : _c;
     var activeLIRef = React.useRef(null);
-    var _d = React.useContext(MarkerIsMovingContext), markerIsMoving = _d.markerIsMoving, setMarkerIsMoving = _d.setMarkerIsMoving;
+    var markerIsMoving = React.useContext(MarkerIsMovingContext).markerIsMoving;
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
@@ -183,11 +183,7 @@ var DocLink = React.forwardRef(function (_a, ref) {
     };
     // on mount, if the item is active,
     // send the top position to the parent
-    React.useEffect(setActiveMarkerPosition, [
-        onActive,
-        active,
-        setMarkerIsMoving,
-    ]);
+    React.useEffect(setActiveMarkerPosition, [onActive, active]);
     React.useImperativeHandle(ref, function () { return ({
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
@@ -208,27 +204,18 @@ var DocLink = React.forwardRef(function (_a, ref) {
             item.label)));
 });
 
-var useIsMounted = function () {
-    var isMounted = React.useRef(false);
-    React.useEffect(function () {
-        isMounted.current = true;
-        return function () {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-};
 var DocGroup = React.forwardRef(function (_a, ref) {
     var _b;
     var group = _a.group, activePath = _a.activePath, collapsible = _a.collapsible, _c = _a.depth, depth = _c === void 0 ? 0 : _c, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, hideMarker = _a.hideMarker;
     var _e = React.useState(group.collapsed !== true), open = _e[0], setOpen = _e[1];
     var $groupElements = React.useRef(null);
     var $listWrapper = React.useRef(null);
-    var didMount = useIsMounted();
     function toggleMenu(open) {
         if (!collapsible)
             return;
         setOpen(open);
+        hideShowAbsoluteMarker();
+        readjustMarkerPosition();
     }
     var hasActiveItemRecursively = React.useCallback(function (items) {
         if (items === void 0) { items = group.items; }
@@ -251,47 +238,36 @@ var DocGroup = React.forwardRef(function (_a, ref) {
         var _a;
         (_a = $groupElements.current) === null || _a === void 0 ? void 0 : _a.reTriggerSetActiveGroup();
     }
-    React.useEffect(function () {
+    /**
+     * To make the marker follow smooth open/close animation of the menu groups
+     * We replace the absolute marker by one in the link. After the transition, the
+     * marker is replaced by the absolute one again.
+     */
+    function hideShowAbsoluteMarker() {
         var _a, _b;
-        if (didMount.current) {
-            (_a = $listWrapper.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
-                setMarkerIsMoving(true);
-            }, { once: true });
-            (_b = $listWrapper.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
-                setMarkerIsMoving(false);
-                if (open || !hasActiveItemRecursively()) {
-                    updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
-                }
-            }, { once: true });
-        }
-    }, [
-        open,
-        setMarkerIsMoving,
-        updateMarkerPosition,
-        hasActiveItemRecursively,
-        didMount,
-    ]);
-    React.useEffect(function () {
-        if (didMount.current) {
-            if (hasActiveItemRecursively()) {
-                if (open) {
-                    reTriggerSetActiveGroupParent();
-                }
-                else {
-                    hideMarker();
-                }
+        (_a = $listWrapper.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
+            setMarkerIsMoving(true);
+        }, { once: true });
+        (_b = $listWrapper.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
+            if (open || !hasActiveItemRecursively()) {
+                updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+            }
+            setMarkerIsMoving(false);
+        }, { once: true });
+    }
+    function readjustMarkerPosition() {
+        if (hasActiveItemRecursively()) {
+            if (open) {
+                reTriggerSetActiveGroupParent();
             }
             else {
-                updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+                hideMarker();
             }
         }
-    }, [
-        open,
-        updateMarkerPosition,
-        hideMarker,
-        hasActiveItemRecursively,
-        didMount,
-    ]);
+        else {
+            updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
+        }
+    }
     React.useImperativeHandle(ref, function () { return ({
         reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
     }); });
@@ -401,4 +377,4 @@ var DocMenu = function (_a) {
 export { DocMenu as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] text-indigo-500 rotate-0 -rotate-90 ml-[28px] grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] transition text-indigo-500 rotate-0 -rotate-90 ml-[28px] grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */