Merge branch 'main' into add-multiselect-types

.all-contributorsrc

@@ -1041,6 +1041,15 @@
         "code"
       ]
     },
+    {
+      "login": "jsehull",
+      "name": "Jesse Hull",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9935383?v=4",
+      "profile": "https://jsehull.com/",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "awarrier99",
       "name": "Ashvin Warrier",

README.md

@@ -224,6 +224,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   <tr>
     <td align="center"><a href="https://github.com/lewandom"><img src="https://avatars.githubusercontent.com/u/8779205?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marcin Lewandowski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lewandom" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/remolueoend"><img src="https://avatars.githubusercontent.com/u/7881606?v=4?s=100" width="100px;" alt=""/><br /><sub><b>remolueoend</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=remolueoend" title="Code">💻</a></td>
+    <td align="center"><a href="https://jsehull.com/"><img src="https://avatars.githubusercontent.com/u/9935383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jesse Hull</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jsehull" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/awarrier99"><img src="https://avatars.githubusercontent.com/u/17476235?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashvin Warrier</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=awarrier99" title="Code">💻</a></td>
   </tr>
 </table>

docs/guides/adding-component-types.md

@@ -37,7 +37,7 @@ By adding TypeScript types to components we anticipate a number of benefits:
 - Developer productivity will increase due to Component API's being
   self-documenting and providing tight integration with code editor
   intellisense.
-- The qualtiy of products developed will increase due to more stable, correct,
+- The quality of products developed will increase due to more stable, correct,
   and thorough component API typings provided first-party through
   `@carbon/react` itself.
 - Maintenance of the types themselves will be simplified by not having to go
@@ -159,5 +159,5 @@ the repository. There is an issue tracking curring status of this effort,
 ### Where should I put the ts interface in the file?
 
 - Above the component definition (likely the top of the file)
-  - The component implementation should be sandwiched inbetween the ts interface
-    and the proptypes definition
+  - The component implementation should be sandwiched in-between the ts
+    interface and the proptypes definition

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -114,9 +114,6 @@ Map {
       "ariaLabel": Object {
         "type": "string",
       },
-      "caption": Object {
-        "type": "string",
-      },
       "children": Object {
         "type": "node",
       },

packages/react/src/components/ContextMenu/useContextMenu.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 /**
- * @param {Element|Document|Window} [trigger=document] The element which should trigger the Menu on right-click
+ * @param {Element|Document|Window|object} [trigger=document] The element or ref which should trigger the Menu on right-click
  * @returns {object} Props object to pass onto Menu component
  */
 function useContextMenu(trigger = document) {
@@ -22,15 +22,17 @@ function useContextMenu(trigger = document) {
   }
 
   useEffect(() => {
+    const el = trigger?.current ?? trigger;
+
     if (
-      (trigger && trigger instanceof Element) ||
-      trigger instanceof Document ||
-      trigger instanceof Window
+      (el && el instanceof Element) ||
+      el instanceof Document ||
+      el instanceof Window
     ) {
-      trigger.addEventListener('contextmenu', openContextMenu);
+      el.addEventListener('contextmenu', openContextMenu);
 
       return () => {
-        trigger.removeEventListener('contextmenu', openContextMenu);
+        el.removeEventListener('contextmenu', openContextMenu);
       };
     }
   }, [trigger]);