@cypress-design/react-docmenu 0.5.1 → 0.5.2

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 12.8s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 12.9s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-docmenu
 
+## 0.5.2
+
+### Patch Changes
+
+- [`5927136`](https://github.com/cypress-io/cypress-design/commit/59271366a460cbdc411a6bec75feb663d3991029) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: make sure when dynamic marker reappear, it does not bounce up
+
 ## 0.5.1
 
 ### Patch Changes

package/DocMenu.tsx

@@ -23,7 +23,8 @@ export const DocMenu: React.FC<DocMenuProps> = ({
   const [activeTop, setActiveTop] = React.useState(0)
   const [activeHeight, setActiveHeight] = React.useState(36)
   const [showMarker, setShowMarker] = React.useState(false)
-  const [markerIsMoving, setMarkerIsMoving] = React.useState(false)
+  const [markerIsMoving, localSetMarkerIsMoving] = React.useState(false)
+  const [hasCSSTransition, setHasCSSTransition] = React.useState(true)
 
   const container = React.useRef<HTMLDivElement>(null)
 
@@ -38,6 +39,19 @@ export const DocMenu: React.FC<DocMenuProps> = ({
   )
 
   const setShowMarkerFalse = React.useCallback(() => setShowMarker(false), [])
+  const setMarkerIsMoving = React.useCallback(
+    (val: boolean) => {
+      localSetMarkerIsMoving(val)
+      if (!val) return
+      // make sure the animation does not fire "after"
+      // the marker has reappeared at its right place
+      setHasCSSTransition(false)
+      setTimeout(() => {
+        setHasCSSTransition(true)
+      }, 300)
+    },
+    [localSetMarkerIsMoving],
+  )
 
   return (
     <MarkerIsMovingContext.Provider
@@ -46,10 +60,13 @@ export const DocMenu: React.FC<DocMenuProps> = ({
       <div ref={container} className="relative">
         {showMarker && !markerIsMoving && collapsible ? (
           <div
-            className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]"
+            className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 ml-[6.5px] mt-[4px]"
             style={{
               top: `${activeTop}px`,
               height: `${activeHeight - 8}px`,
+              transition: hasCSSTransition
+                ? 'height .3s ease-in-out, top .3s ease-in-out'
+                : 'none',
             }}
           />
         ) : null}

package/_DocGroup.tsx

@@ -46,11 +46,11 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
     const $groupElements = React.useRef<DocGroupElementsForward>(null)
     const $listWrapper = React.useRef<HTMLDivElement>(null)
 
-    function toggleMenu(open: boolean) {
+    function toggleMenu(localOpen: boolean) {
       if (!collapsible) return
-      setOpen(open)
-      hideShowAbsoluteMarker()
-      readjustMarkerPosition()
+      hideShowAbsoluteMarker(localOpen)
+      setOpen(localOpen)
+      readjustMarkerPosition(localOpen)
     }
 
     const hasActiveItemRecursively = React.useCallback(
@@ -87,7 +87,7 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
      * We replace the absolute marker by one in the link. After the transition, the
      * marker is replaced by the absolute one again.
      */
-    function hideShowAbsoluteMarker() {
+    function hideShowAbsoluteMarker(localOpen: boolean) {
       $listWrapper.current?.addEventListener(
         'transitionstart',
         () => {
@@ -98,7 +98,7 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
       $listWrapper.current?.addEventListener(
         'transitionend',
         () => {
-          if (open || !hasActiveItemRecursively()) {
+          if (localOpen || !hasActiveItemRecursively()) {
             updateMarkerPosition?.()
           }
           setMarkerIsMoving(false)
@@ -107,9 +107,9 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
       )
     }
 
-    function readjustMarkerPosition() {
+    function readjustMarkerPosition(localOpen: boolean) {
       if (hasActiveItemRecursively()) {
-        if (open) {
+        if (localOpen) {
           reTriggerSetActiveGroupParent()
         } else {
           hideMarker()
@@ -240,6 +240,7 @@ export const DocGroupElements = React.forwardRef<
           item?.setActiveMarkerPosition()
         })
         // calculate the index of the calling group in the list of groups
+        // "index" is the index of the calling group in the list of items (groups and links)
         const indexGroup =
           index -
           // remove all the items that are not groups from the array and count them

package/dist/DocMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAInD,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqD1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAInD,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsE1C,CAAA;AAED,eAAe,OAAO,CAAA"}

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;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"}
+{"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,uGA8G5B,CAAA"}

package/dist/index.es.mjs

@@ -210,12 +210,12 @@ var DocGroup = React.forwardRef(function (_a, ref) {
     var _e = React.useState(group.collapsed !== true), open = _e[0], setOpen = _e[1];
     var $groupElements = React.useRef(null);
     var $listWrapper = React.useRef(null);
-    function toggleMenu(open) {
+    function toggleMenu(localOpen) {
         if (!collapsible)
             return;
-        setOpen(open);
-        hideShowAbsoluteMarker();
-        readjustMarkerPosition();
+        hideShowAbsoluteMarker(localOpen);
+        setOpen(localOpen);
+        readjustMarkerPosition(localOpen);
     }
     var hasActiveItemRecursively = React.useCallback(function (items) {
         if (items === void 0) { items = group.items; }
@@ -243,21 +243,21 @@ var DocGroup = React.forwardRef(function (_a, ref) {
      * We replace the absolute marker by one in the link. After the transition, the
      * marker is replaced by the absolute one again.
      */
-    function hideShowAbsoluteMarker() {
+    function hideShowAbsoluteMarker(localOpen) {
         var _a, _b;
         (_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()) {
+            if (localOpen || !hasActiveItemRecursively()) {
                 updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
             }
             setMarkerIsMoving(false);
         }, { once: true });
     }
-    function readjustMarkerPosition() {
+    function readjustMarkerPosition(localOpen) {
         if (hasActiveItemRecursively()) {
-            if (open) {
+            if (localOpen) {
                 reTriggerSetActiveGroupParent();
             }
             else {
@@ -317,6 +317,7 @@ var DocGroupElements = React.forwardRef(function (_a, ref) {
             item === null || item === void 0 ? void 0 : item.setActiveMarkerPosition();
         });
         // calculate the index of the calling group in the list of groups
+        // "index" is the index of the calling group in the list of items (groups and links)
         var indexGroup = index -
             // remove all the items that are not groups from the array and count them
             items.slice(0, index).filter(function (item) { return !('items' in item); }).length;
@@ -355,7 +356,8 @@ var DocMenu = function (_a) {
     var _e = React.useState(0), activeTop = _e[0], setActiveTop = _e[1];
     var _f = React.useState(36), activeHeight = _f[0], setActiveHeight = _f[1];
     var _g = React.useState(false), showMarker = _g[0], setShowMarker = _g[1];
-    var _h = React.useState(false), markerIsMoving = _h[0], setMarkerIsMoving = _h[1];
+    var _h = React.useState(false), markerIsMoving = _h[0], localSetMarkerIsMoving = _h[1];
+    var _j = React.useState(true), hasCSSTransition = _j[0], setHasCSSTransition = _j[1];
     var container = React.useRef(null);
     var setActivePosition = React.useCallback(function (opts) {
         var _a;
@@ -365,11 +367,25 @@ var DocMenu = function (_a) {
         setActiveHeight(opts.height);
     }, []);
     var setShowMarkerFalse = React.useCallback(function () { return setShowMarker(false); }, []);
+    var setMarkerIsMoving = React.useCallback(function (val) {
+        localSetMarkerIsMoving(val);
+        if (!val)
+            return;
+        // make sure the animation does not fire "after"
+        // the marker has reappeared at its right place
+        setHasCSSTransition(false);
+        setTimeout(function () {
+            setHasCSSTransition(true);
+        }, 300);
+    }, [localSetMarkerIsMoving]);
     return (React.createElement(MarkerIsMovingContext.Provider, { value: { markerIsMoving: markerIsMoving, setMarkerIsMoving: setMarkerIsMoving } },
         React.createElement("div", { ref: container, className: "relative" },
-            showMarker && !markerIsMoving && collapsible ? (React.createElement("div", { className: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]", style: {
+            showMarker && !markerIsMoving && collapsible ? (React.createElement("div", { className: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 ml-[6.5px] mt-[4px]", style: {
                     top: "".concat(activeTop, "px"),
                     height: "".concat(activeHeight - 8, "px"),
+                    transition: hasCSSTransition
+                        ? 'height .3s ease-in-out, top .3s ease-in-out'
+                        : 'none',
                 } })) : null,
             React.createElement(DocGroupElements, __assign$1({}, rest, { items: items, activePath: activePath, collapsible: collapsible, depth: -1, onActivePosition: setActivePosition, LinkComponent: LinkComponent, hideMarker: setShowMarkerFalse })))));
 };
@@ -377,4 +393,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] 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"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 rotate-0 -rotate-90 ml-[28px] grid transition-all 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"> */