@cypress-design/react-docmenu 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +12 -0
  3. package/DocMenu.tsx +19 -2
  4. package/_DocGroup.tsx +37 -58
  5. package/_DocLink.tsx +2 -8
  6. package/dist/DocMenu.d.ts.map +1 -1
  7. package/dist/_DocGroup.d.ts.map +1 -1
  8. package/dist/_DocLink.d.ts.map +1 -1
  9. package/dist/index.es.mjs +50 -58
  10. package/dist/index.es.mjs.map +1 -1
  11. package/dist/index.umd.js +50 -58
  12. package/dist/index.umd.js.map +1 -1
  13. package/package.json +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
2
2
  $ rollup -c ./rollup.config.mjs
3
3
  
4
4
  ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
5
- created ./dist/index.umd.js, ./dist/index.es.mjs in 15.7s
5
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 12.9s
6
6
  $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @cypress-design/react-docmenu
2
2
 
3
+ ## 0.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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
8
+
9
+ ## 0.5.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`171cf54`](https://github.com/cypress-io/cypress-design/commit/171cf546bd79e96b8ef140b2af34d1949d022a4b) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: make docmenu transition properly
14
+
3
15
  ## 0.5.0
4
16
 
5
17
  ### Minor Changes
package/DocMenu.tsx CHANGED
@@ -23,7 +23,8 @@ export const DocMenu: React.FC<DocMenuProps> = ({
23
23
  const [activeTop, setActiveTop] = React.useState(0)
24
24
  const [activeHeight, setActiveHeight] = React.useState(36)
25
25
  const [showMarker, setShowMarker] = React.useState(false)
26
- const [markerIsMoving, setMarkerIsMoving] = React.useState(false)
26
+ const [markerIsMoving, localSetMarkerIsMoving] = React.useState(false)
27
+ const [hasCSSTransition, setHasCSSTransition] = React.useState(true)
27
28
 
28
29
  const container = React.useRef<HTMLDivElement>(null)
29
30
 
@@ -38,6 +39,19 @@ export const DocMenu: React.FC<DocMenuProps> = ({
38
39
  )
39
40
 
40
41
  const setShowMarkerFalse = React.useCallback(() => setShowMarker(false), [])
42
+ const setMarkerIsMoving = React.useCallback(
43
+ (val: boolean) => {
44
+ localSetMarkerIsMoving(val)
45
+ if (!val) return
46
+ // make sure the animation does not fire "after"
47
+ // the marker has reappeared at its right place
48
+ setHasCSSTransition(false)
49
+ setTimeout(() => {
50
+ setHasCSSTransition(true)
51
+ }, 300)
52
+ },
53
+ [localSetMarkerIsMoving],
54
+ )
41
55
 
42
56
  return (
43
57
  <MarkerIsMovingContext.Provider
@@ -46,10 +60,13 @@ export const DocMenu: React.FC<DocMenuProps> = ({
46
60
  <div ref={container} className="relative">
47
61
  {showMarker && !markerIsMoving && collapsible ? (
48
62
  <div
49
- className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]"
63
+ className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 ml-[6.5px] mt-[4px]"
50
64
  style={{
51
65
  top: `${activeTop}px`,
52
66
  height: `${activeHeight - 8}px`,
67
+ transition: hasCSSTransition
68
+ ? 'height .3s ease-in-out, top .3s ease-in-out'
69
+ : 'none',
53
70
  }}
54
71
  />
55
72
  ) : null}
package/_DocGroup.tsx CHANGED
@@ -13,18 +13,6 @@ import {
13
13
  } from './_DocLink'
14
14
  import { MarkerIsMovingContext } from './markerIsMoving'
15
15
 
16
- const useIsMounted = () => {
17
- const isMounted = React.useRef(false)
18
-
19
- React.useEffect(() => {
20
- isMounted.current = true
21
- return () => {
22
- isMounted.current = false
23
- }
24
- }, [])
25
- return isMounted
26
- }
27
-
28
16
  export interface DocGroupProps {
29
17
  group: NavGroup
30
18
  activePath: string
@@ -57,11 +45,12 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
57
45
  const [open, setOpen] = React.useState(group.collapsed !== true)
58
46
  const $groupElements = React.useRef<DocGroupElementsForward>(null)
59
47
  const $listWrapper = React.useRef<HTMLDivElement>(null)
60
- const didMount = useIsMounted()
61
48
 
62
- function toggleMenu(open: boolean) {
49
+ function toggleMenu(localOpen: boolean) {
63
50
  if (!collapsible) return
64
- setOpen(open)
51
+ hideShowAbsoluteMarker(localOpen)
52
+ setOpen(localOpen)
53
+ readjustMarkerPosition(localOpen)
65
54
  }
66
55
 
67
56
  const hasActiveItemRecursively = React.useCallback(
@@ -93,53 +82,42 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
93
82
  $groupElements.current?.reTriggerSetActiveGroup()
94
83
  }
95
84
 
96
- React.useEffect(() => {
97
- if (didMount.current) {
98
- $listWrapper.current?.addEventListener(
99
- 'transitionstart',
100
- () => {
101
- setMarkerIsMoving(true)
102
- },
103
- { once: true },
104
- )
105
- $listWrapper.current?.addEventListener(
106
- 'transitionend',
107
- () => {
108
- setMarkerIsMoving(false)
109
- if (open || !hasActiveItemRecursively()) {
110
- updateMarkerPosition?.()
111
- }
112
- },
113
- { once: true },
114
- )
115
- }
116
- }, [
117
- open,
118
- setMarkerIsMoving,
119
- updateMarkerPosition,
120
- hasActiveItemRecursively,
121
- didMount,
122
- ])
123
-
124
- React.useEffect(() => {
125
- if (didMount.current) {
126
- if (hasActiveItemRecursively()) {
127
- if (open) {
128
- reTriggerSetActiveGroupParent()
129
- } else {
130
- hideMarker()
85
+ /**
86
+ * To make the marker follow smooth open/close animation of the menu groups
87
+ * We replace the absolute marker by one in the link. After the transition, the
88
+ * marker is replaced by the absolute one again.
89
+ */
90
+ function hideShowAbsoluteMarker(localOpen: boolean) {
91
+ $listWrapper.current?.addEventListener(
92
+ 'transitionstart',
93
+ () => {
94
+ setMarkerIsMoving(true)
95
+ },
96
+ { once: true },
97
+ )
98
+ $listWrapper.current?.addEventListener(
99
+ 'transitionend',
100
+ () => {
101
+ if (localOpen || !hasActiveItemRecursively()) {
102
+ updateMarkerPosition?.()
131
103
  }
104
+ setMarkerIsMoving(false)
105
+ },
106
+ { once: true },
107
+ )
108
+ }
109
+
110
+ function readjustMarkerPosition(localOpen: boolean) {
111
+ if (hasActiveItemRecursively()) {
112
+ if (localOpen) {
113
+ reTriggerSetActiveGroupParent()
132
114
  } else {
133
- updateMarkerPosition?.()
115
+ hideMarker()
134
116
  }
117
+ } else {
118
+ updateMarkerPosition?.()
135
119
  }
136
- }, [
137
- open,
138
- updateMarkerPosition,
139
- hideMarker,
140
- hasActiveItemRecursively,
141
- didMount,
142
- ])
120
+ }
143
121
 
144
122
  React.useImperativeHandle(ref, () => ({
145
123
  reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
@@ -262,6 +240,7 @@ export const DocGroupElements = React.forwardRef<
262
240
  item?.setActiveMarkerPosition()
263
241
  })
264
242
  // calculate the index of the calling group in the list of groups
243
+ // "index" is the index of the calling group in the list of items (groups and links)
265
244
  const indexGroup =
266
245
  index -
267
246
  // remove all the items that are not groups from the array and count them
package/_DocLink.tsx CHANGED
@@ -30,9 +30,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
30
30
  ) => {
31
31
  const activeLIRef = React.useRef<HTMLLIElement>(null)
32
32
 
33
- const { markerIsMoving, setMarkerIsMoving } = React.useContext(
34
- MarkerIsMovingContext,
35
- )
33
+ const { markerIsMoving } = React.useContext(MarkerIsMovingContext)
36
34
 
37
35
  const setActiveMarkerPosition = () => {
38
36
  if (active) {
@@ -47,11 +45,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
47
45
 
48
46
  // on mount, if the item is active,
49
47
  // send the top position to the parent
50
- React.useEffect(setActiveMarkerPosition, [
51
- onActive,
52
- active,
53
- setMarkerIsMoving,
54
- ])
48
+ React.useEffect(setActiveMarkerPosition, [onActive, active])
55
49
 
56
50
  React.useImperativeHandle(ref, () => ({
57
51
  setActiveMarkerPosition,
package/dist/DocMenu.d.ts.map CHANGED
@@ -1 +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"}
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,CAsE1C,CAAA;AAED,eAAe,OAAO,CAAA"}
package/dist/_DocGroup.d.ts.map CHANGED
@@ -1 +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"}
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,uGA8G5B,CAAA"}
package/dist/_DocLink.d.ts.map CHANGED
@@ -1 +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"}
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,qFA2DnB,CAAA"}
package/dist/index.es.mjs CHANGED
@@ -170,7 +170,7 @@ var MarkerIsMovingContext = createContext({
170
170
  var DocLink = React.forwardRef(function (_a, ref) {
171
171
  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;
172
172
  var activeLIRef = React.useRef(null);
173
- var _d = React.useContext(MarkerIsMovingContext), markerIsMoving = _d.markerIsMoving, setMarkerIsMoving = _d.setMarkerIsMoving;
173
+ var markerIsMoving = React.useContext(MarkerIsMovingContext).markerIsMoving;
174
174
  var setActiveMarkerPosition = function () {
175
175
  var _a;
176
176
  if (active) {
@@ -183,11 +183,7 @@ var DocLink = React.forwardRef(function (_a, ref) {
183
183
  };
184
184
  // on mount, if the item is active,
185
185
  // send the top position to the parent
186
- React.useEffect(setActiveMarkerPosition, [
187
- onActive,
188
- active,
189
- setMarkerIsMoving,
190
- ]);
186
+ React.useEffect(setActiveMarkerPosition, [onActive, active]);
191
187
  React.useImperativeHandle(ref, function () { return ({
192
188
  setActiveMarkerPosition: setActiveMarkerPosition,
193
189
  }); });
@@ -208,27 +204,18 @@ var DocLink = React.forwardRef(function (_a, ref) {
208
204
  item.label)));
209
205
  });
210
206
 
211
- var useIsMounted = function () {
212
- var isMounted = React.useRef(false);
213
- React.useEffect(function () {
214
- isMounted.current = true;
215
- return function () {
216
- isMounted.current = false;
217
- };
218
- }, []);
219
- return isMounted;
220
- };
221
207
  var DocGroup = React.forwardRef(function (_a, ref) {
222
208
  var _b;
223
209
  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;
224
210
  var _e = React.useState(group.collapsed !== true), open = _e[0], setOpen = _e[1];
225
211
  var $groupElements = React.useRef(null);
226
212
  var $listWrapper = React.useRef(null);
227
- var didMount = useIsMounted();
228
- function toggleMenu(open) {
213
+ function toggleMenu(localOpen) {
229
214
  if (!collapsible)
230
215
  return;
231
- setOpen(open);
216
+ hideShowAbsoluteMarker(localOpen);
217
+ setOpen(localOpen);
218
+ readjustMarkerPosition(localOpen);
232
219
  }
233
220
  var hasActiveItemRecursively = React.useCallback(function (items) {
234
221
  if (items === void 0) { items = group.items; }
@@ -251,47 +238,36 @@ var DocGroup = React.forwardRef(function (_a, ref) {
251
238
  var _a;
252
239
  (_a = $groupElements.current) === null || _a === void 0 ? void 0 : _a.reTriggerSetActiveGroup();
253
240
  }
254
- React.useEffect(function () {
241
+ /**
242
+ * To make the marker follow smooth open/close animation of the menu groups
243
+ * We replace the absolute marker by one in the link. After the transition, the
244
+ * marker is replaced by the absolute one again.
245
+ */
246
+ function hideShowAbsoluteMarker(localOpen) {
255
247
  var _a, _b;
256
- if (didMount.current) {
257
- (_a = $listWrapper.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
258
- setMarkerIsMoving(true);
259
- }, { once: true });
260
- (_b = $listWrapper.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
261
- setMarkerIsMoving(false);
262
- if (open || !hasActiveItemRecursively()) {
263
- updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
264
- }
265
- }, { once: true });
266
- }
267
- }, [
268
- open,
269
- setMarkerIsMoving,
270
- updateMarkerPosition,
271
- hasActiveItemRecursively,
272
- didMount,
273
- ]);
274
- React.useEffect(function () {
275
- if (didMount.current) {
276
- if (hasActiveItemRecursively()) {
277
- if (open) {
278
- reTriggerSetActiveGroupParent();
279
- }
280
- else {
281
- hideMarker();
282
- }
248
+ (_a = $listWrapper.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
249
+ setMarkerIsMoving(true);
250
+ }, { once: true });
251
+ (_b = $listWrapper.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
252
+ if (localOpen || !hasActiveItemRecursively()) {
253
+ updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
254
+ }
255
+ setMarkerIsMoving(false);
256
+ }, { once: true });
257
+ }
258
+ function readjustMarkerPosition(localOpen) {
259
+ if (hasActiveItemRecursively()) {
260
+ if (localOpen) {
261
+ reTriggerSetActiveGroupParent();
283
262
  }
284
263
  else {
285
- updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
264
+ hideMarker();
286
265
  }
287
266
  }
288
- }, [
289
- open,
290
- updateMarkerPosition,
291
- hideMarker,
292
- hasActiveItemRecursively,
293
- didMount,
294
- ]);
267
+ else {
268
+ updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
269
+ }
270
+ }
295
271
  React.useImperativeHandle(ref, function () { return ({
296
272
  reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
297
273
  }); });
@@ -341,6 +317,7 @@ var DocGroupElements = React.forwardRef(function (_a, ref) {
341
317
  item === null || item === void 0 ? void 0 : item.setActiveMarkerPosition();
342
318
  });
343
319
  // calculate the index of the calling group in the list of groups
320
+ // "index" is the index of the calling group in the list of items (groups and links)
344
321
  var indexGroup = index -
345
322
  // remove all the items that are not groups from the array and count them
346
323
  items.slice(0, index).filter(function (item) { return !('items' in item); }).length;
@@ -379,7 +356,8 @@ var DocMenu = function (_a) {
379
356
  var _e = React.useState(0), activeTop = _e[0], setActiveTop = _e[1];
380
357
  var _f = React.useState(36), activeHeight = _f[0], setActiveHeight = _f[1];
381
358
  var _g = React.useState(false), showMarker = _g[0], setShowMarker = _g[1];
382
- var _h = React.useState(false), markerIsMoving = _h[0], setMarkerIsMoving = _h[1];
359
+ var _h = React.useState(false), markerIsMoving = _h[0], localSetMarkerIsMoving = _h[1];
360
+ var _j = React.useState(true), hasCSSTransition = _j[0], setHasCSSTransition = _j[1];
383
361
  var container = React.useRef(null);
384
362
  var setActivePosition = React.useCallback(function (opts) {
385
363
  var _a;
@@ -389,11 +367,25 @@ var DocMenu = function (_a) {
389
367
  setActiveHeight(opts.height);
390
368
  }, []);
391
369
  var setShowMarkerFalse = React.useCallback(function () { return setShowMarker(false); }, []);
370
+ var setMarkerIsMoving = React.useCallback(function (val) {
371
+ localSetMarkerIsMoving(val);
372
+ if (!val)
373
+ return;
374
+ // make sure the animation does not fire "after"
375
+ // the marker has reappeared at its right place
376
+ setHasCSSTransition(false);
377
+ setTimeout(function () {
378
+ setHasCSSTransition(true);
379
+ }, 300);
380
+ }, [localSetMarkerIsMoving]);
392
381
  return (React.createElement(MarkerIsMovingContext.Provider, { value: { markerIsMoving: markerIsMoving, setMarkerIsMoving: setMarkerIsMoving } },
393
382
  React.createElement("div", { ref: container, className: "relative" },
394
- 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: {
383
+ 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: {
395
384
  top: "".concat(activeTop, "px"),
396
385
  height: "".concat(activeHeight - 8, "px"),
386
+ transition: hasCSSTransition
387
+ ? 'height .3s ease-in-out, top .3s ease-in-out'
388
+ : 'none',
397
389
  } })) : null,
398
390
  React.createElement(DocGroupElements, __assign$1({}, rest, { items: items, activePath: activePath, collapsible: collapsible, depth: -1, onActivePosition: setActivePosition, LinkComponent: LinkComponent, hideMarker: setShowMarkerFalse })))));
399
391
  };
@@ -401,4 +393,4 @@ var DocMenu = function (_a) {
401
393
  export { DocMenu as default };
402
394
  //# sourceMappingURL=index.es.mjs.map
403
395
 
404
- /* <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"> */
396
+ /* <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"> */