@cypress-design/react-docmenu 0.7.0 → 1.0.0

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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @cypress-design/react-docmenu
 
+## 1.0.0
+
+### Major Changes
+
+- [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
+
+### Patch Changes
+
+- Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
+  - @cypress-design/constants-docmenu@1.0.0
+  - @cypress-design/react-icon@1.0.0
+
+## 0.7.1
+
+### Patch Changes
+
+- [`ad32042`](https://github.com/cypress-io/cypress-design/commit/ad3204289730de696c9728b1343e06ce68382561) Thanks [@elevatebart](https://github.com/elevatebart)! - only skip scrolling if both dimension are in view
+
 ## 0.7.0
 
 ### Minor Changes

package/DocMenuReact.cy.tsx

@@ -150,7 +150,7 @@ describe('<DocMenu/>', () => {
     const SUT = () => {
       const [pathState, setPathState] = React.useState<string>('/foo')
       return (
-        <>
+        <div className="p-4">
           <button
             onClick={() => setPathState('/faa6')}
             className="p-2 m-2 rounded bg-gray-100 border border-gray-300"
@@ -171,13 +171,14 @@ describe('<DocMenu/>', () => {
             activePath={pathState}
             collapsible
           />
-        </>
+        </div>
       )
     }
     mount(<SUT />)
 
     cy.findByText('Code').click()
     cy.contains('Set path to').click()
+    cy.wait(200)
     cy.contains('Quisquam, quos').then(($el) => {
       const windowInnerHeight = Cypress.config(`viewportHeight`)
 

package/_DocGroup.tsx

@@ -1,3 +1,4 @@
+/* global NodeJS */
 import * as React from 'react'
 import { IconChevronDownSmall } from '@cypress-design/react-icon'
 import clsx from 'clsx'

package/_DocLink.tsx

@@ -57,24 +57,28 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
     React.useEffect(setActiveMarkerPosition, [onActive, active])
 
     React.useEffect(() => {
-      if (active && activeLIRef.current) {
-        // if active check if the item is visible in the
-        // viewport and scrollIntoView if not
-        const rect = activeLIRef.current.getBoundingClientRect()
-
-        if (rect.top > 0 && rect.bottom < window.innerHeight) {
-          return
-        }
-
-        if (rect.left > 0 && rect.right < window.innerWidth) {
-          return
+      // if active check if the item is visible in the
+      // viewport and scrollIntoView if not
+      setTimeout(() => {
+        // give it time tp render and expand
+        if (active && activeLIRef.current) {
+          const rect = activeLIRef.current.getBoundingClientRect()
+
+          if (
+            rect.top > 0 &&
+            rect.bottom < window.innerHeight &&
+            rect.left > 0 &&
+            rect.right < window.innerWidth
+          ) {
+            return
+          }
+
+          activeLIRef.current.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+          })
         }
-
-        activeLIRef.current.scrollIntoView({
-          block: 'nearest',
-          inline: 'nearest',
-        })
-      }
+      }, 200)
     }, [active])
 
     React.useImperativeHandle(ref, () => ({
@@ -82,7 +86,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
     }))
 
     return (
-      <li ref={activeLIRef} className="list-none p-0">
+      <li ref={activeLIRef} className="list-none p-0 scroll-my-10">
         <LinkComponent
           {...itemRest}
           className={clsx('group relative block w-full pl-[24px]', {

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,EAEL,KAAK,OAAO,EAEZ,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAcD,eAAO,MAAM,QAAQ,uFAkKpB,CAAA;AAID,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,CAAA"}
+{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAEL,KAAK,OAAO,EAEZ,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAcD,eAAO,MAAM,QAAQ,uFAkKpB,CAAA;AAID,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,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;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"}
+{"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,qFAwFnB,CAAA"}

package/dist/index.es.mjs

@@ -94,7 +94,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
+    var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
     var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
         if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
             attrName !== 'name') {
@@ -121,7 +121,11 @@ var compileReactIconProperties = function (_a) {
         }
     }, [defs, name, size]);
     var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
-            __html: body,
+            __html: alt
+                ? "<title>".concat(alt.replace(/[><]/g, function (s) {
+                    return s === '>' ? '&gt;' : '&lt;';
+                }), "</title>").concat(body)
+                : body,
         }, className: undefined }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
@@ -143,10 +147,10 @@ function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
 }
 var IconChevronDownSmall = function (props) { return React.createElement('svg', useIconProps(props, {
     "8": {
-        "body": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 2.5 3 3 3-3\" class=\"icon-dark\"/>"
+        "body": "<path d=\"m1 2.5 3 3 3-3\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
     },
     "16": {
-        "body": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 6 4 4 4-4\" class=\"icon-dark\"/>"
+        "body": "<path d=\"m4 6 4 4 4-4\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
     }
 }, ["8", "16"], "chevron-down-small")); };
 
@@ -181,26 +185,29 @@ var DocLink = React.forwardRef(function (_a, ref) {
     // send the top position to the parent
     React.useEffect(setActiveMarkerPosition, [onActive, active]);
     React.useEffect(function () {
-        if (active && activeLIRef.current) {
-            // if active check if the item is visible in the
-            // viewport and scrollIntoView if not
-            var rect = activeLIRef.current.getBoundingClientRect();
-            if (rect.top > 0 && rect.bottom < window.innerHeight) {
-                return;
-            }
-            if (rect.left > 0 && rect.right < window.innerWidth) {
-                return;
+        // if active check if the item is visible in the
+        // viewport and scrollIntoView if not
+        setTimeout(function () {
+            // give it time tp render and expand
+            if (active && activeLIRef.current) {
+                var rect = activeLIRef.current.getBoundingClientRect();
+                if (rect.top > 0 &&
+                    rect.bottom < window.innerHeight &&
+                    rect.left > 0 &&
+                    rect.right < window.innerWidth) {
+                    return;
+                }
+                activeLIRef.current.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
             }
-            activeLIRef.current.scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-            });
-        }
+        }, 200);
     }, [active]);
     React.useImperativeHandle(ref, function () { return ({
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
-    return (React.createElement("li", { ref: activeLIRef, className: "list-none p-0" },
+    return (React.createElement("li", { ref: activeLIRef, className: "list-none p-0 scroll-my-10" },
         React.createElement(LinkComponent, __assign$1({}, itemRest, { className: clsx('group relative block w-full pl-[24px]', {
                 'text-indigo-500 dark:text-indigo-400': active,
                 'text-gray-700 dark:text-gray-500': !active,
@@ -423,4 +430,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 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"> */
+/* <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 scroll-my-10 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"> */