fix: tests and fixes

package.json

@@ -35,6 +35,5 @@
   },
   "resolutions": {
     "selenium-webdriver": "4.0.0-beta.4"
-  },
-  "packageManager": "[email protected]"
+  }
 }

packages/react-ui/components/MaskedInput/ColorableInputElement/ColorableInputElement.styles.ts

@@ -1,16 +1,23 @@
-import { injectGlobal, prefix } from '../../../lib/theming/Emotion';
+import type { Emotion } from '@emotion/css/create-instance';
+
+import { memoizeStyle, prefix } from '../../../lib/theming/Emotion';
 
 export const globalClasses = prefix('colorable')({
   input: 'input',
 });
 
-injectGlobal`
-  input.${globalClasses.input} {
-    display: inline-block;
-    background-color: transparent;
-    background-size: 100%;
-    background-repeat: repeat;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-`;
+export const getStyles = (emotion: Emotion) =>
+  memoizeStyle({
+    input() {
+      return emotion.css`
+        &.${globalClasses.input} {
+          display: inline-block;
+          background-color: transparent;
+          background-size: 100%;
+          background-repeat: repeat;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      `;
+    },
+  });

packages/react-ui/components/MaskedInput/ColorableInputElement/ColorableInputElement.tsx

@@ -7,7 +7,7 @@ import { InputElement, InputElementProps } from '../../Input';
 import { forwardRefAndName } from '../../../lib/forwardRefAndName';
 import { EmotionContext } from '../../../lib/theming/Emotion';
 
-import { globalClasses } from './ColorableInputElement.styles';
+import { getStyles, globalClasses } from './ColorableInputElement.styles';
 
 export type ColorableInputElementProps = InputElementProps & {
   showOnFocus?: boolean;
@@ -28,6 +28,7 @@ export const ColorableInputElement = forwardRefAndName(
     const inputStyle = React.useRef<CSSStyleDeclaration>();
     const theme = useContext(ThemeContext);
     const emotion = useContext(EmotionContext);
+    const styles = getStyles(emotion);
     const debouncedPaintText = useCallback(debounce(paintText), []);
     const [active, setActive] = useState(true);
 
@@ -63,7 +64,12 @@ export const ColorableInputElement = forwardRefAndName(
           onFocus: handleFocus,
           onBlur: handleBlur,
           inputRef,
-          className: emotion.cx(props.className, active && globalClasses.input),
+          className: emotion.cx(props.className, active && styles.input()),
+          style: {
+            ...inputProps.style,
+            WebkitBackgroundClip: 'text',
+            backgroundClip: 'text',
+          },
         })}
         {active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}
       </>

packages/react-ui/components/PasswordInput/PasswordInput.tsx

@@ -28,6 +28,7 @@ export interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>,
 
 export interface PasswordInputState {
   visible: boolean;
+  focused: boolean;
   capsLockEnabled?: boolean | null;
 }
 
@@ -63,6 +64,7 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
 
   public state: PasswordInputState = {
     visible: false,
+    focused: false,
     capsLockEnabled: false,
   };
 
@@ -170,15 +172,27 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
   };
 
   private handleToggleVisibility = () => {
-    this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocus);
+    this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocusOnInput);
   };
 
-  private handleFocus = () => {
+  private handleFocusOnInput = () => {
     if (this.input) {
       this.input.focus();
     }
   };
 
+  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    if (this.state.focused) {
+      return;
+    }
+
+    this.setState({ focused: true });
+
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
+    }
+  };
+
   private handleBlur = () => {
     if (this.input) {
       this.input.blur();
@@ -229,6 +243,12 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
 
   private hideSymbols = () => {
     this.setState({ visible: false });
+
+    if (!this.state.focused) {
+      return;
+    }
+
+    this.setState({ focused: false });
   };
 
   private renderMain = (props: CommonWrapperRestProps<PasswordInputProps>) => {
@@ -238,10 +258,11 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
       onKeyDown: this.handleKeydown,
       onKeyPress: this.handleKeyPress,
       rightIcon: this.renderEye(),
+      onFocus: this.handleFocus,
     };
 
     return (
-      <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols}>
+      <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols} active={this.state.focused}>
         <div data-tid={PasswordInputDataTids.root} className={this.styles.root()}>
           <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />
         </div>

packages/react-ui/components/SidePage/SidePage.tsx

@@ -140,6 +140,10 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
   public componentDidMount() {
     globalObject.addEventListener?.('keydown', this.handleKeyDown);
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
+
+    if (this.layout) {
+      this.layout.addEventListener('scroll', LayoutEvents.emit);
+    }
   }
 
   public componentWillUnmount() {
@@ -148,6 +152,10 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
       this.stackSubscription.remove();
     }
     ModalStack.remove(this);
+
+    if (this.layout) {
+      this.layout.removeEventListener('scroll', LayoutEvents.emit);
+    }
   }
 
   /**

packages/react-ui/components/TokenInput/TokenInput.tsx

@@ -40,6 +40,7 @@ import { createPropsGetter } from '../../lib/createPropsGetter';
 import { getUid } from '../../lib/uidUtils';
 import { TokenView } from '../Token/TokenView';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
+import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot';
 
 import { TokenInputLocale, TokenInputLocaleHelper } from './locale';
 import { getStyles } from './TokenInput.styles';
@@ -726,7 +727,10 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
   private isBlurToMenu = (event: FocusEvent<HTMLElement>) => {
     if (this.menuRef && globalObject.document) {
       const menu = getRootNode(this.tokensInputMenu?.getMenuRef());
-      const relatedTarget = event.relatedTarget || globalObject.document.activeElement;
+
+      const isShadowRootElement = isShadowRoot(this.emotion.sheet.container.getRootNode());
+      const relatedTarget =
+        (isShadowRootElement ? event.target : event.relatedTarget) ?? globalObject.document.activeElement;
 
       if (menu && menu.contains(relatedTarget)) {
         return true;

packages/react-ui/components/Tooltip/Tooltip.tsx

@@ -9,22 +9,22 @@ import { Popup, PopupPositionsType, PopupProps, ShortPopupPositionsType } from '
 import { RenderLayer, RenderLayerProps } from '../../internal/RenderLayer';
 import { Nullable } from '../../typings/utility-types';
 import { MouseEventType } from '../../typings/event-types';
-import { containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';
+import { clickOutsideContent } from '../../lib/listenFocusOutside';
 import { Theme } from '../../lib/theming/Theme';
 import { isTestEnv } from '../../lib/currentEnvironment';
 import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
 import { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
 import { createPropsGetter } from '../../lib/createPropsGetter';
 import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';
-import { isInstanceOf } from '../../lib/isInstanceOf';
 import { EmotionConsumer } from '../../lib/theming/Emotion';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 import {
   getFullReactUIFlagsContext,
   ReactUIFeatureFlags,
   ReactUIFeatureFlagsContext,
 } from '../../lib/featureFlagsContext';
+import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot';
 
 import { getStyles } from './Tooltip.styles';
 
@@ -548,12 +548,10 @@ export class Tooltip extends React.PureComponent<TooltipProps, TooltipState> imp
     }
   };
 
-  private isClickOutsideContent(event: Event) {
-    if (this.contentElement && isInstanceOf(event.target, globalObject.Element)) {
-      return !containsTargetOrRenderContainer(event.target)(this.contentElement);
-    }
-
-    return true;
+  private isClickOutsideContent(event: Event): boolean {
+    const node = this.contentElement;
+    const isShadowRootElement = isShadowRoot(this.emotion.sheet.container.getRootNode());
+    return clickOutsideContent(event, node, isShadowRootElement);
   }
 
   private handleFocus = () => {