@cypress-design/react-docmenu 0.6.0 → 0.7.0

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 (10) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +6 -0
  3. package/DocMenuReact.cy.tsx +43 -73
  4. package/_DocLink.tsx +21 -0
  5. package/dist/_DocLink.d.ts.map +1 -1
  6. package/dist/index.es.mjs +18 -1
  7. package/dist/index.es.mjs.map +1 -1
  8. package/dist/index.umd.js +18 -1
  9. package/dist/index.umd.js.map +1 -1
  10. 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 16.1s
5
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 17.8s
6
6
  $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @cypress-design/react-docmenu
2
2
 
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#388](https://github.com/cypress-io/cypress-design/pull/388) [`7839c67`](https://github.com/cypress-io/cypress-design/commit/7839c670d8a83f8339db1a5d4395bd0dd5eaf987) Thanks [@elevatebart](https://github.com/elevatebart)! - make docmenu scroll to active path if necessary
8
+
3
9
  ## 0.6.0
4
10
 
5
11
  ### Minor Changes
package/DocMenuReact.cy.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import * as React from 'react'
4
4
  import { mount } from 'cypress/react18'
5
5
  import DocMenu from './index'
6
- import assertions from '../assertions'
6
+ import assertions, { BIG_ITEMS_SET } from '../assertions'
7
7
  import { NavGroup, NavItemLink } from '../constants'
8
8
 
9
9
  describe('<DocMenu/>', () => {
@@ -57,75 +57,7 @@ describe('<DocMenu/>', () => {
57
57
  {children}
58
58
  </div>
59
59
  )}
60
- items={[
61
- {
62
- href: '/fooTop',
63
- label: 'Foo Top',
64
- },
65
- {
66
- href: '/test',
67
- label: 'Getting started',
68
- },
69
- {
70
- href: '/faaz',
71
- label:
72
- 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,',
73
- },
74
- {
75
- label: 'Baaaaaaz',
76
- items: [
77
- {
78
- label: 'Bar',
79
- items: [
80
- {
81
- href: '/foo',
82
- label: 'Foo',
83
- },
84
- {
85
- href: '/test',
86
- label: 'Getting started',
87
- },
88
- ],
89
- },
90
- {
91
- label: 'Code',
92
- collapsed: true,
93
- items: [
94
- {
95
- href: '/faa',
96
- label: 'sasassa',
97
- },
98
- {
99
- href: '/faa1',
100
- label: 'sasassa2',
101
- },
102
- {
103
- href: '/faa2',
104
- label: 'sasassa3',
105
- },
106
- {
107
- href: '/faa3',
108
- label: 'sasassa4',
109
- },
110
- {
111
- href: '/faa4',
112
- label:
113
- 'lorem ipsum dolor sit amet consectetur adipisicing elit',
114
- },
115
- {
116
- href: '/faa5',
117
- label: 'sasassa5',
118
- },
119
- {
120
- href: '/faa6',
121
- label:
122
- 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos',
123
- },
124
- ],
125
- },
126
- ],
127
- },
128
- ]}
60
+ items={BIG_ITEMS_SET}
129
61
  />
130
62
  </div>
131
63
  )
@@ -213,7 +145,45 @@ describe('<DocMenu/>', () => {
213
145
  }
214
146
  mount(<SUT />)
215
147
  })
216
- })
217
148
 
218
- // pseudo text
219
- // lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos
149
+ it('scrolls the active item into view', { viewportHeight: 200 }, () => {
150
+ const SUT = () => {
151
+ const [pathState, setPathState] = React.useState<string>('/foo')
152
+ return (
153
+ <>
154
+ <button
155
+ onClick={() => setPathState('/faa6')}
156
+ className="p-2 m-2 rounded bg-gray-100 border border-gray-300"
157
+ >
158
+ Set path to <code>/faa6</code>
159
+ </button>
160
+ <DocMenu
161
+ items={BIG_ITEMS_SET}
162
+ LinkComponent={({ href, children, style, ...props }) => (
163
+ <button
164
+ onClick={() => setPathState(href)}
165
+ {...props}
166
+ style={{ ...style, textAlign: 'left' }}
167
+ >
168
+ {children}
169
+ </button>
170
+ )}
171
+ activePath={pathState}
172
+ collapsible
173
+ />
174
+ </>
175
+ )
176
+ }
177
+ mount(<SUT />)
178
+
179
+ cy.findByText('Code').click()
180
+ cy.contains('Set path to').click()
181
+ cy.contains('Quisquam, quos').then(($el) => {
182
+ const windowInnerHeight = Cypress.config(`viewportHeight`)
183
+
184
+ const rect = ($el?.[0] as any).getBoundingClientRect()
185
+
186
+ expect(windowInnerHeight).to.be.greaterThan(rect.top)
187
+ })
188
+ })
189
+ })
package/_DocLink.tsx CHANGED
@@ -56,6 +56,27 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
56
56
  // send the top position to the parent
57
57
  React.useEffect(setActiveMarkerPosition, [onActive, active])
58
58
 
59
+ React.useEffect(() => {
60
+ if (active && activeLIRef.current) {
61
+ // if active check if the item is visible in the
62
+ // viewport and scrollIntoView if not
63
+ const rect = activeLIRef.current.getBoundingClientRect()
64
+
65
+ if (rect.top > 0 && rect.bottom < window.innerHeight) {
66
+ return
67
+ }
68
+
69
+ if (rect.left > 0 && rect.right < window.innerWidth) {
70
+ return
71
+ }
72
+
73
+ activeLIRef.current.scrollIntoView({
74
+ block: 'nearest',
75
+ inline: 'nearest',
76
+ })
77
+ }
78
+ }, [active])
79
+
59
80
  React.useImperativeHandle(ref, () => ({
60
81
  setActiveMarkerPosition,
61
82
  }))
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;AAE/D,MAAM,WAAW,OAAO;IACtB,iBAAiB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,WAAW,EAAE,OAAO,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,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,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzD,aAAa,EAAE,iBAAiB,CAAA;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFA+DnB,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;AAE/D,MAAM,WAAW,OAAO;IACtB,iBAAiB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,WAAW,EAAE,OAAO,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,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,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzD,aAAa,EAAE,iBAAiB,CAAA;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFAoFnB,CAAA"}
package/dist/index.es.mjs CHANGED
@@ -180,6 +180,23 @@ var DocLink = React.forwardRef(function (_a, ref) {
180
180
  // on mount, if the item is active,
181
181
  // send the top position to the parent
182
182
  React.useEffect(setActiveMarkerPosition, [onActive, active]);
183
+ React.useEffect(function () {
184
+ if (active && activeLIRef.current) {
185
+ // if active check if the item is visible in the
186
+ // viewport and scrollIntoView if not
187
+ var rect = activeLIRef.current.getBoundingClientRect();
188
+ if (rect.top > 0 && rect.bottom < window.innerHeight) {
189
+ return;
190
+ }
191
+ if (rect.left > 0 && rect.right < window.innerWidth) {
192
+ return;
193
+ }
194
+ activeLIRef.current.scrollIntoView({
195
+ block: 'nearest',
196
+ inline: 'nearest',
197
+ });
198
+ }
199
+ }, [active]);
183
200
  React.useImperativeHandle(ref, function () { return ({
184
201
  setActiveMarkerPosition: setActiveMarkerPosition,
185
202
  }); });
@@ -406,4 +423,4 @@ var DocMenu = function (_a) {
406
423
  export { DocMenu as default };
407
424
  //# sourceMappingURL=index.es.mjs.map
408
425
 
409
- /* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all 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-indigo-400 text-gray-500 bg-indigo-400 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"> */
426
+ /* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 visible block inline 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-indigo-400 text-gray-500 bg-indigo-400 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"> */