@cypress-design/react-docmenu 0.4.3 → 0.5.1

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.
@@ -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.5s
5
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 12.8s
6
6
  $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @cypress-design/react-docmenu
2
2
 
3
+ ## 0.5.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`171cf54`](https://github.com/cypress-io/cypress-design/commit/171cf546bd79e96b8ef140b2af34d1949d022a4b) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: make docmenu transition properly
8
+
9
+ ## 0.5.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#357](https://github.com/cypress-io/cypress-design/pull/357) [`d0ed7c5`](https://github.com/cypress-io/cypress-design/commit/d0ed7c513df09d24639895ae1c7f2633eab8c254) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: add transition when open/close collapsible menu
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [[`d0ed7c5`](https://github.com/cypress-io/cypress-design/commit/d0ed7c513df09d24639895ae1c7f2633eab8c254)]:
18
+ - @cypress-design/constants-docmenu@0.2.0
19
+
3
20
  ## 0.4.3
4
21
 
5
22
  ### Patch Changes
package/DocMenu.tsx CHANGED
@@ -2,6 +2,7 @@ import * as React from 'react'
2
2
  import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
3
3
  import type { LinkComponentType } from './_DocLink'
4
4
  import { DocGroupElements } from './_DocGroup'
5
+ import { MarkerIsMovingContext } from './markerIsMoving'
5
6
 
6
7
  export type NavItem = NavGroup | NavItemLink
7
8
 
@@ -22,6 +23,7 @@ export const DocMenu: React.FC<DocMenuProps> = ({
22
23
  const [activeTop, setActiveTop] = React.useState(0)
23
24
  const [activeHeight, setActiveHeight] = React.useState(36)
24
25
  const [showMarker, setShowMarker] = React.useState(false)
26
+ const [markerIsMoving, setMarkerIsMoving] = React.useState(false)
25
27
 
26
28
  const container = React.useRef<HTMLDivElement>(null)
27
29
 
@@ -35,28 +37,34 @@ export const DocMenu: React.FC<DocMenuProps> = ({
35
37
  [],
36
38
  )
37
39
 
40
+ const setShowMarkerFalse = React.useCallback(() => setShowMarker(false), [])
41
+
38
42
  return (
39
- <div ref={container} className="relative">
40
- {showMarker && collapsible ? (
41
- <div
42
- className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]"
43
- style={{
44
- top: `${activeTop + 4}px`,
45
- height: `${activeHeight - 8}px`,
46
- }}
43
+ <MarkerIsMovingContext.Provider
44
+ value={{ markerIsMoving, setMarkerIsMoving }}
45
+ >
46
+ <div ref={container} className="relative">
47
+ {showMarker && !markerIsMoving && collapsible ? (
48
+ <div
49
+ className="absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]"
50
+ style={{
51
+ top: `${activeTop}px`,
52
+ height: `${activeHeight - 8}px`,
53
+ }}
54
+ />
55
+ ) : null}
56
+ <DocGroupElements
57
+ {...rest}
58
+ items={items}
59
+ activePath={activePath}
60
+ collapsible={collapsible}
61
+ depth={-1}
62
+ onActivePosition={setActivePosition}
63
+ LinkComponent={LinkComponent}
64
+ hideMarker={setShowMarkerFalse}
47
65
  />
48
- ) : null}
49
- <DocGroupElements
50
- {...rest}
51
- items={items}
52
- activePath={activePath}
53
- collapsible={collapsible}
54
- depth={-1}
55
- onActivePosition={setActivePosition}
56
- LinkComponent={LinkComponent}
57
- hideMarker={() => setShowMarker(false)}
58
- />
59
- </div>
66
+ </div>
67
+ </MarkerIsMovingContext.Provider>
60
68
  )
61
69
  }
62
70
 
@@ -48,8 +48,12 @@ describe('<DocMenu/>', () => {
48
48
  <div className="w-[200px] mt-[60px] absolute">
49
49
  <DocMenu
50
50
  activePath={activeHref}
51
- LinkComponent={({ href, className, children }) => (
52
- <div className={className} onClick={() => setActiveHref(href)}>
51
+ LinkComponent={({ href, className, children, style }) => (
52
+ <div
53
+ style={style}
54
+ className={className}
55
+ onClick={() => setActiveHref(href)}
56
+ >
53
57
  {children}
54
58
  </div>
55
59
  )}
package/_DocGroup.tsx CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  type DocLinkForward,
12
12
  type LinkComponentType,
13
13
  } from './_DocLink'
14
+ import { MarkerIsMovingContext } from './markerIsMoving'
14
15
 
15
16
  export interface DocGroupProps {
16
17
  group: NavGroup
@@ -43,10 +44,13 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
43
44
  ) => {
44
45
  const [open, setOpen] = React.useState(group.collapsed !== true)
45
46
  const $groupElements = React.useRef<DocGroupElementsForward>(null)
47
+ const $listWrapper = React.useRef<HTMLDivElement>(null)
46
48
 
47
49
  function toggleMenu(open: boolean) {
48
50
  if (!collapsible) return
49
51
  setOpen(open)
52
+ hideShowAbsoluteMarker()
53
+ readjustMarkerPosition()
50
54
  }
51
55
 
52
56
  const hasActiveItemRecursively = React.useCallback(
@@ -72,29 +76,56 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
72
76
  [onActivePosition, open],
73
77
  )
74
78
 
75
- function reTriggerSetActiveGroup() {
79
+ const { setMarkerIsMoving } = React.useContext(MarkerIsMovingContext)
80
+
81
+ function reTriggerSetActiveGroupParent() {
76
82
  $groupElements.current?.reTriggerSetActiveGroup()
77
83
  }
78
84
 
79
- React.useEffect(() => {
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() {
91
+ $listWrapper.current?.addEventListener(
92
+ 'transitionstart',
93
+ () => {
94
+ setMarkerIsMoving(true)
95
+ },
96
+ { once: true },
97
+ )
98
+ $listWrapper.current?.addEventListener(
99
+ 'transitionend',
100
+ () => {
101
+ if (open || !hasActiveItemRecursively()) {
102
+ updateMarkerPosition?.()
103
+ }
104
+ setMarkerIsMoving(false)
105
+ },
106
+ { once: true },
107
+ )
108
+ }
109
+
110
+ function readjustMarkerPosition() {
80
111
  if (hasActiveItemRecursively()) {
81
112
  if (open) {
82
- reTriggerSetActiveGroup()
113
+ reTriggerSetActiveGroupParent()
83
114
  } else {
84
115
  hideMarker()
85
116
  }
86
117
  } else {
87
118
  updateMarkerPosition?.()
88
119
  }
89
- }, [open, updateMarkerPosition, hideMarker, hasActiveItemRecursively])
120
+ }
90
121
 
91
122
  React.useImperativeHandle(ref, () => ({
92
- reTriggerSetActiveGroup,
123
+ reTriggerSetActiveGroup: reTriggerSetActiveGroupParent,
93
124
  }))
94
125
 
95
126
  const onUpdateMarkerPosition = React.useCallback(() => {
96
127
  if (hasActiveItemRecursively()) {
97
- reTriggerSetActiveGroup()
128
+ reTriggerSetActiveGroupParent()
98
129
  } else {
99
130
  updateMarkerPosition?.()
100
131
  }
@@ -115,30 +146,38 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
115
146
  <IconChevronDownSmall
116
147
  stroke-color="gray-400"
117
148
  size={depth ? '8' : '16'}
118
- className={clsx(
119
- 'absolute transform transition-transform left-0',
120
- {
121
- 'rotate-0': open,
122
- '-rotate-90': !open,
123
- 'ml-[16px]': depth,
124
- },
125
- )}
149
+ className={clsx(classes.expandedIcon, {
150
+ 'rotate-0': open,
151
+ '-rotate-90': !open,
152
+ 'ml-[28px]': depth,
153
+ })}
126
154
  />
127
155
  ) : null}
128
156
  {group.label}
129
157
  </Head>
130
- <DocGroupElements
131
- ref={$groupElements}
132
- className={!open ? 'hidden' : undefined}
133
- items={group.items}
134
- activePath={activePath}
135
- collapsible={collapsible}
136
- depth={depth}
137
- onActivePosition={setActivePosition}
138
- updateMarkerPosition={onUpdateMarkerPosition}
139
- LinkComponent={LinkComponent}
140
- hideMarker={hideMarker}
141
- />
158
+ <div
159
+ className={clsx('grid transition-all relative', {
160
+ 'grid-rows-[0fr]': !open && collapsible,
161
+ 'grid-rows-[1fr]': open || !collapsible,
162
+ })}
163
+ ref={$listWrapper}
164
+ >
165
+ {open && collapsible && depth === 0 ? (
166
+ <div className={classes.openListBorderLeft} />
167
+ ) : null}
168
+ <DocGroupElements
169
+ ref={$groupElements}
170
+ className="overflow-hidden"
171
+ items={group.items}
172
+ activePath={activePath}
173
+ collapsible={collapsible}
174
+ depth={depth}
175
+ onActivePosition={setActivePosition}
176
+ updateMarkerPosition={onUpdateMarkerPosition}
177
+ LinkComponent={LinkComponent}
178
+ hideMarker={hideMarker}
179
+ />
180
+ </div>
142
181
  </>
143
182
  )
144
183
  },
@@ -158,7 +197,7 @@ export interface DocGroupElementsProps
158
197
  }
159
198
 
160
199
  export interface DocGroupElementsForward {
161
- reTriggerSetActiveGroup: () => void
200
+ reTriggerSetActiveGroup: (index?: number) => void
162
201
  }
163
202
 
164
203
  export const DocGroupElements = React.forwardRef<
@@ -195,35 +234,44 @@ export const DocGroupElements = React.forwardRef<
195
234
  [items, activePath],
196
235
  )
197
236
 
198
- function reTriggerSetActiveGroup() {
199
- $groups.current.forEach((group) => {
200
- group?.reTriggerSetActiveGroup()
201
- })
202
- $items.current.forEach((item) => {
203
- item?.setActiveMarkerPosition()
204
- })
205
- }
237
+ const reTriggerSetActiveGroup = React.useCallback(
238
+ (index: number = 0) => {
239
+ $items.current.forEach((item) => {
240
+ item?.setActiveMarkerPosition()
241
+ })
242
+ // calculate the index of the calling group in the list of groups
243
+ const indexGroup =
244
+ index -
245
+ // remove all the items that are not groups from the array and count them
246
+ items.slice(0, index).filter((item) => !('items' in item)).length
247
+
248
+ // only update groups that come after the toggled one
249
+ // others will not need to update the marker
250
+ // since they are "before" in the rendering tree
251
+ $groups.current.slice(indexGroup + 1).forEach((group) => {
252
+ group?.reTriggerSetActiveGroup()
253
+ })
254
+ },
255
+ [items],
256
+ )
206
257
 
207
258
  React.useImperativeHandle(ref, () => ({
208
259
  reTriggerSetActiveGroup,
209
260
  }))
210
261
 
211
- const onUpdateMarkerPosition = React.useCallback(() => {
212
- if (hasActiveItemRecursively()) {
213
- reTriggerSetActiveGroup()
214
- } else {
215
- updateMarkerPosition?.()
216
- }
217
- }, [hasActiveItemRecursively, updateMarkerPosition])
262
+ const onUpdateMarkerPosition = React.useCallback(
263
+ (index: number) => {
264
+ if (hasActiveItemRecursively()) {
265
+ reTriggerSetActiveGroup(index)
266
+ } else {
267
+ updateMarkerPosition?.()
268
+ }
269
+ },
270
+ [hasActiveItemRecursively, updateMarkerPosition, reTriggerSetActiveGroup],
271
+ )
218
272
 
219
273
  return (
220
- <ul
221
- {...rest}
222
- className={clsx('list-none p-0', className, {
223
- 'border-l border-gray-100': depth === 0 && collapsible,
224
- 'ml-[8px]': depth >= 0,
225
- })}
226
- >
274
+ <ul {...rest} className={clsx('list-none p-0', className)}>
227
275
  {items.map((item, index) =>
228
276
  'items' in item ? (
229
277
  <li key={index} className="relative list-none p-0">
@@ -238,7 +286,7 @@ export const DocGroupElements = React.forwardRef<
238
286
  LinkComponent={LinkComponent}
239
287
  hideMarker={hideMarker}
240
288
  onActivePosition={onActivePosition}
241
- updateMarkerPosition={onUpdateMarkerPosition}
289
+ updateMarkerPosition={() => onUpdateMarkerPosition(index)}
242
290
  />
243
291
  </li>
244
292
  ) : (
@@ -251,7 +299,9 @@ export const DocGroupElements = React.forwardRef<
251
299
  active={item.href === activePath}
252
300
  collapsible={collapsible}
253
301
  depth={depth}
254
- onActive={onActivePosition}
302
+ onActive={(opts) =>
303
+ depth < 0 ? hideMarker() : onActivePosition(opts)
304
+ }
255
305
  LinkComponent={LinkComponent}
256
306
  />
257
307
  ),
package/_DocLink.tsx CHANGED
@@ -1,11 +1,13 @@
1
1
  import * as React from 'react'
2
2
  import clsx from 'clsx'
3
3
  import { NavItemLink } from '@cypress-design/constants-docmenu'
4
+ import { MarkerIsMovingContext } from './markerIsMoving'
4
5
 
5
6
  export type LinkComponentType = React.ElementType<{
6
7
  href: string
7
- className?: string
8
- children?: React.ReactNode
8
+ className: string
9
+ style: React.CSSProperties
10
+ children: React.ReactNode
9
11
  }>
10
12
 
11
13
  export interface DocLinkProps {
@@ -28,13 +30,12 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
28
30
  ) => {
29
31
  const activeLIRef = React.useRef<HTMLLIElement>(null)
30
32
 
31
- // on mount, if the item is active,
32
- // send the top position to the parent
33
- React.useEffect(setActiveMarkerPosition, [onActive, active])
33
+ const { markerIsMoving } = React.useContext(MarkerIsMovingContext)
34
34
 
35
- function setActiveMarkerPosition() {
35
+ const setActiveMarkerPosition = () => {
36
36
  if (active) {
37
37
  const box = activeLIRef?.current?.getBoundingClientRect()
38
+
38
39
  onActive?.({
39
40
  top: box?.top || 0,
40
41
  height: box?.height || 0,
@@ -42,36 +43,38 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
42
43
  }
43
44
  }
44
45
 
46
+ // on mount, if the item is active,
47
+ // send the top position to the parent
48
+ React.useEffect(setActiveMarkerPosition, [onActive, active])
49
+
45
50
  React.useImperativeHandle(ref, () => ({
46
51
  setActiveMarkerPosition,
47
52
  }))
48
53
 
49
54
  return (
50
- <li
51
- ref={activeLIRef}
52
- className={clsx('list-none p-0', {
53
- 'pl-[16px]': depth >= 0,
54
- })}
55
- >
55
+ <li ref={activeLIRef} className="list-none p-0">
56
56
  <LinkComponent
57
- className={clsx('group relative inline-block pl-[24px]', {
57
+ className={clsx('group relative block w-full pl-[24px]', {
58
58
  'text-indigo-500': active,
59
+ 'text-gray-700 dark:text-gray-500': !active,
59
60
  'py-[8px] text-[16px] leading-[24px]': depth < 0,
60
- 'py-[12px] leading-[20px] text-[14px]': depth >= 0,
61
+ 'leading-[20px] text-[14px] py-[12px]': depth >= 0,
61
62
  })}
62
63
  href={item.href}
64
+ style={{
65
+ paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
66
+ }}
63
67
  >
64
68
  {depth >= 0 ? (
65
69
  <div
66
70
  className={clsx(
67
- 'absolute w-[4px] z-10 top-[4px] bottom-[4px] rounded-full hidden',
71
+ 'left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full',
68
72
  {
73
+ hidden: !markerIsMoving || !active,
69
74
  'group-hover:block bg-gray-300': !active && collapsible,
75
+ 'bg-indigo-500': active && markerIsMoving,
70
76
  },
71
77
  )}
72
- style={{
73
- left: `-${18.5 + depth * 8}px`,
74
- }}
75
78
  />
76
79
  ) : null}
77
80
  {item.label}
@@ -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;AAGnD,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,CA8C1C,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,CAqD1C,CAAA;AAED,eAAe,OAAO,CAAA"}
@@ -33,7 +33,7 @@ export interface DocGroupElementsProps extends React.HTMLAttributes<HTMLUListEle
33
33
  className?: string;
34
34
  }
35
35
  export interface DocGroupElementsForward {
36
- reTriggerSetActiveGroup: () => void;
36
+ reTriggerSetActiveGroup: (index?: number) => void;
37
37
  }
38
38
  export declare const DocGroupElements: React.ForwardRefExoticComponent<DocGroupElementsProps & React.RefAttributes<DocGroupElementsForward>>;
39
39
  //# sourceMappingURL=_DocGroup.d.ts.map
@@ -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,uFAmHpB,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,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,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,uGA6G5B,CAAA"}
@@ -2,8 +2,9 @@ import * as React from 'react';
2
2
  import { NavItemLink } from '@cypress-design/constants-docmenu';
3
3
  export type LinkComponentType = React.ElementType<{
4
4
  href: string;
5
- className?: string;
6
- children?: React.ReactNode;
5
+ className: string;
6
+ style: React.CSSProperties;
7
+ children: React.ReactNode;
7
8
  }>;
8
9
  export interface DocLinkProps {
9
10
  item: NavItemLink;
@@ -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;AAE/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,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,qFA0DnB,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"}