Merge branch 'main' into innerRef-overflow-fix

Author: 2nikhiltom

.all-contributorsrc

@@ -1771,6 +1771,15 @@
         "review"
       ]
     },
+    {
+      "login": "nchevsky",
+      "name": "Nick Chevsky",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3987849?v=4",
+      "profile": "https://github.com/nchevsky",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "Tweakified",
       "name": "Daniel Smith",

.yarn/cache/koa-npm-2.15.4-5a729e75eb-98de771738.zip renamed to .yarn/cache/koa-npm-2.16.1-7f26717794-f33b95227e.zip

@@ -326,6 +326,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/a88zach"><img src="https://avatars.githubusercontent.com/u/1724822?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zach Tindall</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=a88zach" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/vsvsv"><img src="https://avatars.githubusercontent.com/u/9214692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vsevolod Platunov</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vsvsv" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/heloiselui"><img src="https://avatars.githubusercontent.com/u/71858203?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Heloise Lui</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Documentation">📖</a> <a href="#a11y-heloiselui" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aheloiselui" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/nchevsky"><img src="https://avatars.githubusercontent.com/u/3987849?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nick Chevsky</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=nchevsky" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/Tweakified"><img src="https://avatars.githubusercontent.com/u/58192912?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Smith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Tweakified" title="Code">💻</a> <a href="#a11y-Tweakified" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Tweakified" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/enricobguedes"><img src="https://avatars.githubusercontent.com/u/45374536?v=4?s=100" width="100px;" alt=""/><br /><sub><b>enricobguedes</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=enricobguedes" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/gdelory"><img src="https://avatars.githubusercontent.com/u/9974707?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Guillaume Delory</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=gdelory" title="Code">💻</a></td>

README.md

@@ -124,6 +124,7 @@ async function inlineSassDependencies(
       await replace({
         files: file.path,
         from: REPLACE_REGEX,
+        glob: { windowsPathsNoEscape: true },
         to(_, match) {
           return `@import '${
             isWin ? relativeImportPath.replace('\\', '/') : relativeImportPath

packages/cli/src/commands/inline.js

@@ -26,7 +26,6 @@ import { OverflowMenuVertical } from '@carbon/icons-react';
 import classNames from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
-import { ClickListener } from '../../internal/ClickListener';
 import {
   DIRECTION_BOTTOM,
   DIRECTION_TOP,
@@ -41,6 +40,7 @@ import deprecate from '../../prop-types/deprecate';
 import mergeRefs from '../../tools/mergeRefs';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { IconButton } from '../IconButton';
+import { useOutsideClick } from '../../internal/useOutsideClick';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -277,6 +277,7 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
     const prevOpenState = useRef(open);
     /** The element ref of the tooltip's trigger button. */
     const triggerRef = useRef<HTMLButtonElement>(null);
+    const wrapperRef = useRef<HTMLSpanElement>(null);
 
     // Sync open prop changes.
     useEffect(() => {
@@ -301,6 +302,16 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
       prevOpenState.current = open;
     }, [open, onClose]);
 
+    useOutsideClick(wrapperRef, ({ target }) => {
+      if (
+        open &&
+        (!menuBodyRef.current ||
+          (target instanceof Node && !menuBodyRef.current.contains(target)))
+      ) {
+        closeMenu();
+      }
+    });
+
     const focusMenuEl = useCallback(() => {
       if (triggerRef.current) {
         triggerRef.current.focus();
@@ -371,17 +382,6 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
       }
     };
 
-    const handleClickOutside = (evt: globalThis.MouseEvent) => {
-      if (
-        open &&
-        (!menuBodyRef.current ||
-          (evt.target instanceof Node &&
-            !menuBodyRef.current.contains(evt.target)))
-      ) {
-        closeMenu();
-      }
-    };
-
     /**
      * Focuses the next enabled overflow menu item given the currently focused
      * item index and direction to move.
@@ -550,10 +550,11 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
       : mergeRefs(triggerRef, ref);
 
     return (
-      <ClickListener onClickOutside={handleClickOutside}>
+      <>
         <span
           className={`${prefix}--overflow-menu__wrapper`}
-          aria-owns={open ? menuBodyId : undefined}>
+          aria-owns={open ? menuBodyId : undefined}
+          ref={wrapperRef}>
           <IconButton
             {...other}
             type="button"
@@ -574,7 +575,7 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
           </IconButton>
           {open && hasMountedTrigger && wrappedMenuBody}
         </span>
-      </ClickListener>
+      </>
     );
   }
 );

packages/react/src/components/OverflowMenu/OverflowMenu.tsx

@@ -47,3 +47,7 @@
 .sb-definition-tooltip p {
   @include type.type-style('body-short-02');
 }
+
+.cds--tooltip-content {
+  overflow-wrap: break-word;
+}

packages/react/src/components/Tooltip/story.scss

@@ -9,13 +9,8 @@
   <head>
     <title>carbon-web-components example</title>
     <meta charset="UTF-8" />
-
+    
     <link rel="stylesheet" href="src/styles.scss" />
-    <style>
-      .example-layer-test-component {
-        padding: 1rem;
-      }
-    </style>
     <script type="module" src="src/index.js"></script>
   </head>
   <body>

packages/react/src/internal/ClickListener.ts

@@ -1,9 +1,15 @@
 @use '@carbon/styles/scss/reset';
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/spacing';
 
 :root {
   @include theme.theme(themes.$white);
   background-color: var(--cds-background);
   color: var(--cds-text-primary);
 }
+
+.example-layer-test-component {
+  padding: spacing.$spacing-05;
+  background: theme.$layer;
+}

packages/react/src/internal/__tests__/ClickListener-test.js

@@ -42,6 +42,6 @@ import '@carbon/web-components/es/components/inline-loading/index.js';
 <cds-inline-loading status="active">Loading data...</cds-inline-loading>
 ```
 
-## `<cds-inline-loading>` attributes and properties
+## `<cds-inline-loading>` attributes, properties and events
 
 <ArgTypes of="cds-inline-loading" />