@cypress-design/react-docmenu 0.5.3 → 0.5.4

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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-docmenu
 
+## 0.5.4
+
+### Patch Changes
+
+- [`fe2f9f0`](https://github.com/cypress-io/cypress-design/commit/fe2f9f0435117454b3d81ce22ec3e9258330a725) Thanks [@elevatebart](https://github.com/elevatebart)! - make margin of button on depth button
+
 ## 0.5.3
 
 ### Patch Changes

package/DocMenuReact.cy.tsx

@@ -163,7 +163,11 @@ describe('<DocMenu/>', () => {
   })
 
   function mountStory(items: (NavItemLink | NavGroup)[] = [], activePath = '') {
-    mount(<DocMenu items={items} activePath={activePath} />)
+    mount(
+      <div className="p-4">
+        <DocMenu items={items} activePath={activePath} />
+      </div>,
+    )
   }
   assertions(mountStory)
 })

package/_DocGroup.tsx

@@ -144,6 +144,9 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
             'text-gray-800 dark:text-gray-200':
               !hasActiveItemRecursivelyMemo && activePath !== group.href,
           })}
+          style={{
+            paddingLeft: depth >= 1 ? `${(depth - 1) * 12 + 48}px` : undefined,
+          }}
         >
           {collapsible ? (
             <IconChevronDownSmall
@@ -152,8 +155,11 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
               className={clsx(classes.expandedIcon, {
                 'rotate-0': open,
                 '-rotate-90': !open,
-                'ml-[28px]': depth,
               })}
+              style={{
+                marginLeft:
+                  depth >= 1 ? `${(depth - 1) * 12 + 28}px` : undefined,
+              }}
             />
           ) : null}
           {group.label}

package/_DocLink.tsx

@@ -30,12 +30,22 @@ export interface DocLinkForward {
 }
 
 export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
-  ({ item, depth, markerIsMoving, context, onActive, LinkComponent }, ref) => {
+  (
+    {
+      item: { label, ...itemRest },
+      depth,
+      markerIsMoving,
+      context,
+      onActive,
+      LinkComponent,
+    },
+    ref,
+  ) => {
     const activeLIRef = React.useRef<HTMLLIElement>(null)
 
     const { collapsible, activePath } = context
 
-    const active = item.href === activePath
+    const active = itemRest.href === activePath
 
     const setActiveMarkerPosition = () => {
       if (active) {
@@ -59,13 +69,13 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
     return (
       <li ref={activeLIRef} className="list-none p-0">
         <LinkComponent
+          {...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,
             'py-[8px] text-[16px] leading-[24px]': depth < 0,
             'leading-[20px] text-[14px] py-[12px]': depth >= 0,
           })}
-          href={item.href}
           style={{
             paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
           }}
@@ -82,7 +92,7 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
               )}
             />
           ) : null}
-          {item.label}
+          {label}
         </LinkComponent>
       </li>
     )

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,uFAsJpB,CAAA;AAED,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":"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,uFA4JpB,CAAA;AAED,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,qFA0DnB,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,qFAoEnB,CAAA"}

package/dist/index.es.mjs

@@ -162,10 +162,10 @@ const classes = {
 };
 
 var DocLink = React.forwardRef(function (_a, ref) {
-    var item = _a.item, depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
+    var _b = _a.item, label = _b.label, itemRest = __rest$1(_b, ["label"]), depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
     var activeLIRef = React.useRef(null);
     var collapsible = context.collapsible, activePath = context.activePath;
-    var active = item.href === activePath;
+    var active = itemRest.href === activePath;
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
@@ -183,20 +183,20 @@ var DocLink = React.forwardRef(function (_a, ref) {
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
     return (React.createElement("li", { ref: activeLIRef, className: "list-none p-0" },
-        React.createElement(LinkComponent, { className: clsx('group relative block w-full pl-[24px]', {
+        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,
                 'py-[8px] text-[16px] leading-[24px]': depth < 0,
                 'leading-[20px] text-[14px] py-[12px]': depth >= 0,
-            }), href: item.href, style: {
+            }), style: {
                 paddingLeft: depth >= 0 ? "".concat(depth * 12 + 48, "px") : undefined,
-            } },
+            } }),
             depth >= 0 ? (React.createElement("div", { className: clsx('left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full', {
                     hidden: !markerIsMoving || !active,
                     'group-hover:block bg-gray-300': !active && collapsible,
                     'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
                 }) })) : null,
-            item.label)));
+            label)));
 });
 
 var hasActiveItemRecursively = function (items, localActivePath) {
@@ -286,12 +286,15 @@ var DocGroup = React.forwardRef(function (_a, ref) {
                 _b['text-indigo-500 dark:text-indigo-400'] = activePath === group.href,
                 _b['text-gray-900 dark:text-gray-100'] = hasActiveItemRecursivelyMemo && activePath !== group.href,
                 _b['text-gray-800 dark:text-gray-200'] = !hasActiveItemRecursivelyMemo && activePath !== group.href,
-                _b)) },
+                _b)), style: {
+                paddingLeft: depth >= 1 ? "".concat((depth - 1) * 12 + 48, "px") : undefined,
+            } },
             collapsible ? (React.createElement(IconChevronDownSmall, { "stroke-color": "gray-400", size: depth ? '8' : '16', className: clsx(classes.expandedIcon, {
                     'rotate-0': open,
                     '-rotate-90': !open,
-                    'ml-[28px]': depth,
-                }) })) : null,
+                }), style: {
+                    marginLeft: depth >= 1 ? "".concat((depth - 1) * 12 + 28, "px") : undefined,
+                } })) : null,
             group.label),
         React.createElement("div", { className: clsx('relative', collapsible
                 ? {
@@ -394,4 +397,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 ml-[28px] 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"> */
+/* <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"> */