diff --git a/packages/click-to-react-component/package.json b/packages/click-to-react-component/package.json index 669b64d..6d7e5a0 100644 --- a/packages/click-to-react-component/package.json +++ b/packages/click-to-react-component/package.json @@ -1,7 +1,7 @@ { "type": "module", "name": "click-to-react-component", - "version": "1.1.0", + "version": "1.1.1", "description": "Option+Click your React components in your browser to open the source file in VS Code", "exports": "./src/index.js", "types": "src/types.d.ts", diff --git a/packages/click-to-react-component/src/ContextMenu.js b/packages/click-to-react-component/src/ContextMenu.js index 027bde9..ffb124a 100644 --- a/packages/click-to-react-component/src/ContextMenu.js +++ b/packages/click-to-react-component/src/ContextMenu.js @@ -233,6 +233,7 @@ export const ContextMenu = React.forwardRef( padding: 5px; border-radius: 4px; font-size: 13px; + max-width: 50vw; } [data-click-to-component-contextmenu] button:focus, @@ -351,7 +352,9 @@ export const ContextMenu = React.forwardRef( ${Object.entries(props).map( ([prop, value]) => html` ${' '} - ${prop} + ${prop} ` )} ${'>'} diff --git a/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js b/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js index 50d8a3c..af64d05 100644 --- a/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js +++ b/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js @@ -30,11 +30,16 @@ export function getDisplayNameForInstance(instance) { case 11: // ForwardRef return 'React.forwardRef' - case 15: // MemoComponent + case 14: // MemoComponent + case 15: // MemoComponent or LazyComponent in react>16 // Attempt to get name from wrapped component - return elementType.type.name || 'React.memo' + return ( + elementType.type?.name || + Symbol.keyFor?.(elementType.$$typeof) || + 'React.memo' + ) - case 16: // LazyComponent + case 16: // LazyComponent in react 16 return 'React.lazy' default: