From 957e78b4374d630e44b2a3ce94b16dfaad28e9ec Mon Sep 17 00:00:00 2001
From: Mikhail Shatikhin <shatikhin@skbkontur.ru>
Date: Wed, 13 Nov 2024 17:19:41 +0500
Subject: [PATCH] fix: add fixes

---
 .../Simple Components/chrome2022.png          |   4 +-
 .../Simple Components/chrome2022Dark.png      |   4 +-
 .../Simple Components/firefox2022.png         |   4 +-
 .../Simple Components/firefox2022Dark.png     |   4 +-
 .../PasswordInput/PasswordInput.tsx           |  27 +++-
 .../components/TokenInput/TokenInput.tsx      |   6 +-
 .../react-ui/components/Tooltip/Tooltip.tsx   |  14 +--
 .../__stories__/shadowDom.stories.tsx         | 118 +++++++++++++++---
 .../FocusControlWrapper.tsx                   |   6 +-
 .../internal/InputLikeText/InputLikeText.tsx  |   2 +-
 .../internal/RenderLayer/RenderLayer.tsx      |  21 +---
 packages/react-ui/lib/listenFocusOutside.ts   |  24 +++-
 packages/react-ui/lib/theming/Emotion.ts      |  13 +-
 13 files changed, 183 insertions(+), 64 deletions(-)

diff --git a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022.png b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022.png
index 240b16e3695..3c2cd242a4e 100644
--- a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022.png	
+++ b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022.png	
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6cc3c658f2ae82b2ae08fef7e191635f8e7a3545ef42f4b4e56c3ab319a827a6
-size 167283
+oid sha256:9ff642e3117c121baed3eb2789efd0458028d8e255bbce995551243273075914
+size 184170
diff --git a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022Dark.png b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022Dark.png
index b3e1077b6b3..852d5c560db 100644
--- a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022Dark.png	
+++ b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/chrome2022Dark.png	
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a2ce0b69353558ad982f1199a2ff2f4278f86e8ea3e399417b170725fd5f1ea6
-size 178935
+oid sha256:1e37bfd545ea53c12d2ed98cd00de20002b499cc8c5a21534b2dc87dc8d9dad9
+size 195436
diff --git a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022.png b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022.png
index bb2f669db6c..030df1ee665 100644
--- a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022.png	
+++ b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022.png	
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4f96d6174428983cac8fa928f5613ab1acab886dc9187cb108d9e8142ec8e8ec
-size 173259
+oid sha256:0ca790782268d9981ec119681742446cb7557bf7f3be62f063bb7d74f28454cc
+size 190015
diff --git a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022Dark.png b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022Dark.png
index d11e5c3475c..7a1bb530d64 100644
--- a/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022Dark.png	
+++ b/packages/react-ui/.creevey/images/ShadowDom/Simple Components/firefox2022Dark.png	
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f8e8a1e89d0238123450719dba6ecf191b19dc10119760dde147304b604c4f6
-size 182232
+oid sha256:5f30fed6c6867cfb9ea50c3d2ab4754ea515feb2c069538b2f4f1459213ef626
+size 198772
diff --git a/packages/react-ui/components/PasswordInput/PasswordInput.tsx b/packages/react-ui/components/PasswordInput/PasswordInput.tsx
index 9ad91598c1b..be4fcdddc44 100644
--- a/packages/react-ui/components/PasswordInput/PasswordInput.tsx
+++ b/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>
diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx
index 25bd72542ba..df878153134 100644
--- a/packages/react-ui/components/TokenInput/TokenInput.tsx
+++ b/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';
@@ -725,7 +726,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;
diff --git a/packages/react-ui/components/Tooltip/Tooltip.tsx b/packages/react-ui/components/Tooltip/Tooltip.tsx
index 953551535cf..3cc7e6f3ba7 100644
--- a/packages/react-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/react-ui/components/Tooltip/Tooltip.tsx
@@ -9,7 +9,7 @@ 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';
@@ -17,7 +17,6 @@ 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 {
@@ -25,6 +24,7 @@ import {
   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 = () => {
diff --git a/packages/react-ui/components/__stories__/shadowDom.stories.tsx b/packages/react-ui/components/__stories__/shadowDom.stories.tsx
index 3462498311c..2d9fba50090 100644
--- a/packages/react-ui/components/__stories__/shadowDom.stories.tsx
+++ b/packages/react-ui/components/__stories__/shadowDom.stories.tsx
@@ -56,24 +56,32 @@ const Components: React.JSX.Element[] = [
   <Button>button</Button>,
   <Calendar value={'22.11.2020'} />,
   <Center children={'center'} />,
-  <Checkbox children={'checkbox'} />,
-  <ComboBox getItems={() => Promise.resolve([1, 2, 3])} />,
+  <Checkbox children={'checkbox'} onValueChange={console.log} />,
+  <ComboBox<number> getItems={() => Promise.resolve([1, 2, 3])} renderItem={(x) => x} onValueChange={console.log} />,
   <CurrencyInput onValueChange={console.log} />,
   <CurrencyLabel value={123} />,
-  <DateInput />,
+  <DateInput onValueChange={console.log} />,
   <DatePicker onValueChange={console.log} />,
-  <Dropdown caption={'x'} />,
-  <DropdownMenu caption={'x'} />,
-  <FileUploader />,
+  <Dropdown caption={'Dropdown'}>
+    <MenuItem>MenuItem</MenuItem>
+    <MenuItem>MenuItem</MenuItem>
+    <MenuItem>MenuItem</MenuItem>
+  </Dropdown>,
+  <DropdownMenu caption={<Button>DropdownMenu</Button>}>
+    <MenuItem>MenuItem</MenuItem>
+    <MenuItem>MenuItem</MenuItem>
+    <MenuItem>MenuItem</MenuItem>
+  </DropdownMenu>,
+  <FileUploader onValueChange={console.log} />,
   <FxInput onValueChange={console.log} />,
   <Gapped gap={0}>gap</Gapped>,
   <GlobalLoader />,
   <Group>
     <Button>button</Button>
-    <Input />
+    <Input onValueChange={console.log} />
   </Group>,
   <Hint text={'hint'}>hint</Hint>,
-  <Input />,
+  <Input onValueChange={console.log} />,
   <Kebab children={'kebab'} />,
   <Link>link</Link>,
   // <Loader />,
@@ -83,11 +91,13 @@ const Components: React.JSX.Element[] = [
   // <MiniModal />,
   // <Modal />,
   <Paging activePage={0} pagesCount={6} onPageChange={console.log} />,
-  <PasswordInput />,
-  <Radio value={1} children={'radio'} />,
-  <RadioGroup items={[1, 2]} />,
+  <form action="">
+    <PasswordInput autoComplete={'off'} onValueChange={console.log} />
+  </form>,
+  <Radio value={1} children={'radio'} onValueChange={console.log} />,
+  <RadioGroup items={[1, 2]} onValueChange={console.log} />,
   <ScrollContainer maxHeight={100} children={<div style={{ height: 1000, backgroundColor: 'cyan' }}></div>} />,
-  <Select items={[1, 2]} />,
+  <Select items={[1, 2]} onValueChange={console.log} />,
   // <SidePage />,
   // <Spinner />,
   <Sticky side={'bottom'} />,
@@ -96,17 +106,86 @@ const Components: React.JSX.Element[] = [
       { label: '1', value: '1' },
       { label: '2', value: '2' },
     ]}
+    onValueChange={console.log}
   />,
   <Tabs value={''} />,
-  <Textarea value={''} />,
+  <Textarea value={''} onValueChange={console.log} />,
   <Toast />,
   <SingleToast />,
-  <Toggle />,
+  <Toggle onValueChange={console.log} />,
   <Token children={'token'} />,
-  <TokenInput getItems={() => Promise.resolve([1, 2, 3])} />,
-  <Tooltip>tooltip</Tooltip>,
-  <TooltipMenu caption={'tooltipMenu'} />,
-  <MaskedInput mask={'fack'} />,
+  <TokenInput
+    getItems={() => Promise.resolve([1, 2, 3])}
+    valueToString={(x) => x.toString()}
+    onValueChange={console.log}
+  />,
+  <Tooltip render={() => <div>Tooltip</div>}>tooltip</Tooltip>,
+  <Tooltip
+    trigger="click"
+    render={() => {
+      return (
+        <Gapped vertical>
+          <Dropdown caption={'Dropdown'}>
+            <MenuItem>MenuItem</MenuItem>
+            <MenuItem>MenuItem</MenuItem>
+            <MenuItem>MenuItem</MenuItem>
+          </Dropdown>
+          <DropdownMenu caption={<Button>DropdownMenu</Button>}>
+            <MenuItem>MenuItem</MenuItem>
+            <MenuItem>MenuItem</MenuItem>
+            <MenuItem>MenuItem</MenuItem>
+          </DropdownMenu>
+          <TooltipMenu caption={<Button>TooltipMenu</Button>}>
+            <MenuItem>MenuItem</MenuItem>
+            <MenuItem>MenuItem</MenuItem>
+            <MenuItem>MenuItem</MenuItem>
+          </TooltipMenu>
+          <DatePicker onValueChange={console.log} />
+          <ComboBox<number> getItems={() => Promise.resolve([1, 2, 3])} renderItem={(x) => x} />
+          <FileUploader />
+          <Select items={[1, 2]} />
+          <TokenInput<number> getItems={() => Promise.resolve([1, 2, 3])} valueToString={(x) => x.toString()} />
+          <Tooltip
+            render={() => (
+              <Gapped vertical>
+                <Dropdown caption={'Dropdown'}>
+                  <MenuItem>MenuItem</MenuItem>
+                  <MenuItem>MenuItem</MenuItem>
+                  <MenuItem>MenuItem</MenuItem>
+                </Dropdown>
+                <DropdownMenu caption={<Button>DropdownMenu</Button>}>
+                  <MenuItem>MenuItem</MenuItem>
+                  <MenuItem>MenuItem</MenuItem>
+                  <MenuItem>MenuItem</MenuItem>
+                </DropdownMenu>
+                <TooltipMenu caption={<Button>TooltipMenu</Button>}>
+                  <MenuItem>MenuItem</MenuItem>
+                  <MenuItem>MenuItem</MenuItem>
+                  <MenuItem>MenuItem</MenuItem>
+                </TooltipMenu>
+                <DatePicker onValueChange={console.log} />
+                <ComboBox<number> getItems={() => Promise.resolve([1, 2, 3])} renderItem={(x) => x} />
+                <FileUploader />
+                <Select items={[1, 2]} />
+                <TokenInput<number> getItems={() => Promise.resolve([1, 2, 3])} valueToString={(x) => x.toString()} />
+                <Tooltip render={() => <div>Tooltip</div>}>tooltip</Tooltip>
+              </Gapped>
+            )}
+          >
+            tooltip
+          </Tooltip>
+        </Gapped>
+      );
+    }}
+  >
+    <Button>Trip tooltip</Button>
+  </Tooltip>,
+  <TooltipMenu caption={<Button>TooltipMenu</Button>}>
+    <MenuItem>MenuItem</MenuItem>
+    <MenuItem>MenuItem</MenuItem>
+    <MenuItem>MenuItem</MenuItem>
+  </TooltipMenu>,
+  <MaskedInput mask={'fack'} onValueChange={console.log} />,
   <ResponsiveLayout children={(currentLayout) => <div>{currentLayout.isMobile ? 'isMobile' : 'isDesktop'}</div>} />,
 ];
 
@@ -206,6 +285,9 @@ export const ModalScenarios = () => {
         <MenuItem>MenuItem</MenuItem>
       </Kebab>
       <DatePicker onValueChange={console.log} />
+      <Tooltip render={() => <DatePicker onValueChange={console.log} />}>
+        <Button>DatepickerForm</Button>
+      </Tooltip>
     </Gapped>
   );
 
diff --git a/packages/react-ui/internal/FocusControlWrapper/FocusControlWrapper.tsx b/packages/react-ui/internal/FocusControlWrapper/FocusControlWrapper.tsx
index fcc93ecb4fb..08f61f61f11 100644
--- a/packages/react-ui/internal/FocusControlWrapper/FocusControlWrapper.tsx
+++ b/packages/react-ui/internal/FocusControlWrapper/FocusControlWrapper.tsx
@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, isValidElement, cloneElement, ReactElement } from 'react';
+import type { Nullable } from 'react-ui/typings/utility-types';
 
 import { CommonWrapper } from '../CommonWrapper';
 
@@ -9,7 +10,10 @@ interface Props {
    * Использовать только когда на children нет пропса disabled
    */
   disabled?: boolean;
-
+  /**
+   * Ссылка на корневой html элемент
+   */
+  rootNodeRef?: (e: Nullable<React.ReactInstance>) => void;
   /**
    * Событие вызывается когда элемент потеряет фокус, и при этом он задисэйблен
    */
diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
index a5897601cb7..e4bc83c130d 100644
--- a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
+++ b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -221,7 +221,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
     Object.assign(context, { disabled, focused, size });
 
     return (
-      <FocusControlWrapper disabled={disabled} onBlurWhenDisabled={this.resetFocus}>
+      <FocusControlWrapper rootNodeRef={this.setRootNode} disabled={disabled} onBlurWhenDisabled={this.resetFocus}>
         <span
           data-tid={InputLikeTextDataTids.root}
           {...rest}
diff --git a/packages/react-ui/internal/RenderLayer/RenderLayer.tsx b/packages/react-ui/internal/RenderLayer/RenderLayer.tsx
index 6943172f150..ea1aa74076e 100644
--- a/packages/react-ui/internal/RenderLayer/RenderLayer.tsx
+++ b/packages/react-ui/internal/RenderLayer/RenderLayer.tsx
@@ -2,12 +2,11 @@ import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
 import { Emotion } from '@emotion/css/types/create-instance';
 
-import { containsTargetOrRenderContainer, listen as listenFocusOutside } from '../../lib/listenFocusOutside';
+import { clickOutsideContent, listen as listenFocusOutside } from '../../lib/listenFocusOutside';
 import { CommonProps, CommonWrapper } from '../CommonWrapper';
 import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';
 import { Nullable } from '../../typings/utility-types';
 import { createPropsGetter } from '../../lib/createPropsGetter';
-import { isInstanceOf } from '../../lib/isInstanceOf';
 import { EmotionConsumer } from '../../lib/theming/Emotion';
 import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot';
 
@@ -129,24 +128,10 @@ export class RenderLayer extends React.Component<RenderLayerProps> {
   };
 
   private handleNativeDocClick = (event: Event) => {
-    const target = event.target || event.srcElement;
     const node = this.getAnchorNode();
-
     const isShadowRootElement = isShadowRoot(this.emotion.sheet.container.getRootNode());
-    if (
-      !node ||
-      (isShadowRootElement && event.composed && event.composedPath().indexOf(node) > -1) ||
-      (isShadowRootElement &&
-        isInstanceOf(target, globalObject.Element) &&
-        containsTargetOrRenderContainer(event.composedPath()[0] as unknown as Element)(node)) ||
-      (!isShadowRootElement &&
-        isInstanceOf(target, globalObject.Element) &&
-        containsTargetOrRenderContainer(target)(node))
-    ) {
-      return;
-    }
-
-    if (this.props.onClickOutside) {
+    const clickOutsideOfContent = clickOutsideContent(event, node, isShadowRootElement);
+    if (clickOutsideOfContent && this.props.onClickOutside) {
       this.props.onClickOutside(event);
     }
   };
diff --git a/packages/react-ui/lib/listenFocusOutside.ts b/packages/react-ui/lib/listenFocusOutside.ts
index df241a2cbf8..7f1f7cbb483 100644
--- a/packages/react-ui/lib/listenFocusOutside.ts
+++ b/packages/react-ui/lib/listenFocusOutside.ts
@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom';
 import debounce from 'lodash.debounce';
 import { globalObject } from '@skbkontur/global-object';
+import { Nullable } from 'react-ui/typings/utility-types';
 
 import { PORTAL_INLET_ATTR, PORTAL_OUTLET_ATTR } from '../internal/RenderContainer';
 
@@ -86,8 +87,8 @@ export function findRenderContainer(node: Element, rootNode: Element, container?
   if (newContainerId) {
     const selector = `[${PORTAL_INLET_ATTR}~="${newContainerId}"]`;
     const nextNode =
-      (rootNode.getRootNode() as ShadowRoot | Document)?.querySelector(selector) ||
-      globalObject.document?.querySelector(selector);
+      globalObject.document?.querySelector(selector) ||
+      (rootNode.getRootNode() as ShadowRoot | Document)?.querySelector(selector);
 
     if (!nextNode) {
       throw Error(`Origin node for render container was not found`);
@@ -115,3 +116,22 @@ export function listen(elements: Element[] | (() => Element[]), callback: (event
     },
   };
 }
+
+export function clickOutsideContent(event: Event, node: Nullable<Element>, isShadowRootElement: boolean): boolean {
+  if (!node) {
+    return false;
+  }
+
+  if (
+    isShadowRootElement &&
+    ((event.composed && event.composedPath().indexOf(node) > -1) ||
+      (isInstanceOf(event.target, globalObject.Element) &&
+        containsTargetOrRenderContainer(event.composedPath()[0] as unknown as Element)(node)))
+  ) {
+    return false;
+  } else if (isInstanceOf(event.target, globalObject.Element) && containsTargetOrRenderContainer(event.target)(node)) {
+    return false;
+  }
+
+  return true;
+}
diff --git a/packages/react-ui/lib/theming/Emotion.ts b/packages/react-ui/lib/theming/Emotion.ts
index 588d60d576d..cdb0f2cb248 100644
--- a/packages/react-ui/lib/theming/Emotion.ts
+++ b/packages/react-ui/lib/theming/Emotion.ts
@@ -38,14 +38,17 @@ function isZeroArgs<R, T extends FunctionWithParams<R>>(fn: T | FunctionWithPara
   return fn.length === 0;
 }
 
-const memoize = <A extends AnyObject, R>(fn: (() => R) | ((arg: A) => R)): (() => R) | ((arg: A) => R) => {
+const memoize = <A extends AnyObject, R>(
+  fn: (() => R) | ((arg: A) => R),
+  context: Record<string, unknown>,
+): (() => R) | ((arg: A) => R) => {
   if (isZeroArgs(fn)) {
     let isCalled = false;
     let result: R;
     return () => {
       if (!isCalled) {
         isCalled = true;
-        result = fn();
+        result = fn.call(context);
       }
       return result;
     };
@@ -54,7 +57,7 @@ const memoize = <A extends AnyObject, R>(fn: (() => R) | ((arg: A) => R)): (() =
   const cache = new WeakMap();
   return (arg: A) => {
     if (!cache.has(arg)) {
-      cache.set(arg, fn(arg));
+      cache.set(arg, fn.call(context, arg));
     }
 
     return cache.get(arg);
@@ -64,7 +67,9 @@ const memoize = <A extends AnyObject, R>(fn: (() => R) | ((arg: A) => R)): (() =
 export const memoizeStyle = <S extends { [className: string]: (() => string) | ((t: Theme) => string) }>(
   styles: S,
 ): S => {
-  Object.keys(styles).forEach((className) => (styles[className as keyof S] = memoize(styles[className]) as S[keyof S]));
+  Object.keys(styles).forEach(
+    (className) => (styles[className as keyof S] = memoize(styles[className], styles) as S[keyof S]),
+  );
   return styles;
 };