feat: add support for Shadow DOM for DropdownContainer

app/build-config/craco.config.js

@@ -165,6 +165,8 @@ function configureWebpack(config, { paths }) {
 
     changePluginByName(config, 'HtmlWebpackPlugin', (plugin) => {
         plugin.userOptions.isWrapUuiAppInShadowDom = isWrapUuiAppInShadowDom;
+        // Template receives plugin.options, not userOptions (options is a copy made at plugin construction time)
+        plugin.options.isWrapUuiAppInShadowDom = isWrapUuiAppInShadowDom;
     });
     changePluginByName(config, 'ForkTsCheckerWebpackPlugin', (plugin) => {
         // custom formatter can be removed when next bug is fixed:

app/src/helpers/appRootUtils.ts

@@ -16,6 +16,7 @@ export function getAppRootNode() {
             div = document.createElement('div');
             div.id = SHADOW_ROOT_ID;
             div.className = document.body.className;
+            div.style.height = '100%';
             document.body.className = '';
             defaultRoot.shadowRoot.appendChild(div);
         }

changelog.md

@@ -1,6 +1,7 @@
 # 6.4.4 - xx.xx.2026
 
 **What's New**
+* [DropdownContainer]: added Shadow DOM support.
 * [Blocker]: added `inset` prop (`BlockerInset`: top, bottom, left, right in px) to control the blocker's coverage area.
 * Added Cursor AI integration with skills and developer documentation to improve AI-assisted development workflow.
 * [Dropdown]: added `fallbackPlacements` prop to customize alternative placements when preferred placement doesn't fit
@@ -17,6 +18,7 @@
 
 
 **What's Fixed**
+* [DropdownContainer]: fixed `autoFocus` always being `true` even when `false` is passed through params
 * [DataPickerBody]: empty search results are announced via a **polite** off-screen `role="status"` region [#1506](https://github.com/epam/UUI/issues/1506) Case №9.
 * [VirtualList]: fixed loading `Blocker` not fully covering the visible area.
 * [FiltersPanel]: fixed filters being centered instead of left-aligned inside dropdown popups ([#3065](https://github.com/epam/UUI/issues/3065))

public/docs/content/unitTestingGuide-cookbook.json

@@ -609,7 +609,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "react-focus-lock",
+        "text": "@epam/uui-react-focus-lock-fork",
         "uui-richTextEditor-bold": true
       }
     ]
@@ -679,7 +679,7 @@
         "text": "("
       },
       {
-        "text": "'react-focus-lock'",
+        "text": "'@epam/uui-react-focus-lock-fork'",
         "uui-richTextEditor-bold": true
       },
       {
@@ -693,7 +693,7 @@
         "text": "("
       },
       {
-        "text": "'react-focus-lock'",
+        "text": "'@epam/uui-react-focus-lock-fork'",
         "uui-richTextEditor-bold": true
       },
       {

public/docs/content/unitTestingGuide-getting-started.json

@@ -78,7 +78,7 @@
         "text": ", "
       },
       {
-        "text": "react-focus-lock",
+        "text": "@epam/uui-react-focus-lock-fork",
         "uui-richTextEditor-code": true
       },
       {

public/docs/docsGenOutput/docsGenOutput.json

@@ -51371,7 +51371,7 @@
       "editor": {
        "type": "bool"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      },
      {
@@ -51386,7 +51386,7 @@
        "raw": "string | React.ComponentClass<Record<string, any> & { children: React.ReactNode; }, any> | React.FunctionComponent<Record<string, any> & { children: React.ReactNode; }>",
        "html": "<span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>ComponentClass<span class=\"token operator\">&lt;</span>Record<span class=\"token operator\">&lt;</span><span class=\"token builtin\">string</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">any</span><span class=\"token operator\">></span> <span class=\"token operator\">&amp;</span> <span class=\"token punctuation\">{</span> children<span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">any</span><span class=\"token operator\">></span> <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>FunctionComponent<span class=\"token operator\">&lt;</span>Record<span class=\"token operator\">&lt;</span><span class=\"token builtin\">string</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">any</span><span class=\"token operator\">></span> <span class=\"token operator\">&amp;</span> <span class=\"token punctuation\">{</span> children<span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span><span class=\"token operator\">></span>"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      },
      {
@@ -51401,7 +51401,7 @@
        "raw": "(HTMLElement | React.RefObject<any>)[]",
        "html": "<span class=\"token punctuation\">(</span>HTMLElement <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>RefObject<span class=\"token operator\">&lt;</span><span class=\"token builtin\">any</span><span class=\"token operator\">></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      },
      {
@@ -51421,7 +51421,7 @@
        "raw": "boolean | FocusOptions | (returnTo: Element) => boolean | FocusOptions",
        "html": "<span class=\"token builtin\">boolean</span> <span class=\"token operator\">|</span> FocusOptions <span class=\"token operator\">|</span> <span class=\"token punctuation\">(</span>returnTo<span class=\"token operator\">:</span> Element<span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token builtin\">boolean</span> <span class=\"token operator\">|</span> FocusOptions"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      }
     ],
@@ -78218,7 +78218,7 @@
       "editor": {
        "type": "bool"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      },
      {
@@ -78233,7 +78233,7 @@
        "raw": "string | React.ComponentClass<Record<string, any> & { children: React.ReactNode; }, any> | React.FunctionComponent<Record<string, any> & { children: React.ReactNode; }>",
        "html": "<span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>ComponentClass<span class=\"token operator\">&lt;</span>Record<span class=\"token operator\">&lt;</span><span class=\"token builtin\">string</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">any</span><span class=\"token operator\">></span> <span class=\"token operator\">&amp;</span> <span class=\"token punctuation\">{</span> children<span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">any</span><span class=\"token operator\">></span> <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>FunctionComponent<span class=\"token operator\">&lt;</span>Record<span class=\"token operator\">&lt;</span><span class=\"token builtin\">string</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">any</span><span class=\"token operator\">></span> <span class=\"token operator\">&amp;</span> <span class=\"token punctuation\">{</span> children<span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span><span class=\"token operator\">></span>"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      },
      {
@@ -78248,7 +78248,7 @@
        "raw": "(HTMLElement | React.RefObject<any>)[]",
        "html": "<span class=\"token punctuation\">(</span>HTMLElement <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>RefObject<span class=\"token operator\">&lt;</span><span class=\"token builtin\">any</span><span class=\"token operator\">></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      },
      {
@@ -78268,7 +78268,7 @@
        "raw": "boolean | FocusOptions | (returnTo: Element) => boolean | FocusOptions",
        "html": "<span class=\"token builtin\">boolean</span> <span class=\"token operator\">|</span> FocusOptions <span class=\"token operator\">|</span> <span class=\"token punctuation\">(</span>returnTo<span class=\"token operator\">:</span> Element<span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token builtin\">boolean</span> <span class=\"token operator\">|</span> FocusOptions"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      },
      {
@@ -81954,7 +81954,7 @@
        "raw": "(HTMLElement | React.RefObject<any>)[]",
        "html": "<span class=\"token punctuation\">(</span>HTMLElement <span class=\"token operator\">|</span> React<span class=\"token punctuation\">.</span>RefObject<span class=\"token operator\">&lt;</span><span class=\"token builtin\">any</span><span class=\"token operator\">></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>"
       },
-      "from": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
+      "from": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps",
       "required": false
      }
     ],
@@ -121330,14 +121330,14 @@
     "exported": false
    }
   },
-  "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts:ReactFocusLockProps": {
+  "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts:ReactFocusLockProps": {
    "summary": {
-    "module": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts",
+    "module": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts",
     "typeName": {
      "name": "ReactFocusLockProps",
      "nameFull": "ReactFocusLockProps<ChildrenType, LockProps>"
     },
-    "src": "node_modules/react-focus-lock/dist/cjs/interfaces.d.ts",
+    "src": "node_modules/@epam/uui-react-focus-lock-fork/dist/cjs/interfaces.d.ts",
     "exported": false
    }
   },

test-utils/src/jsdom/setupJsDom.js

@@ -90,8 +90,8 @@ function enableMockForCommon3rdPartyDeps() {
         };
     });
 
-    testRunner.mock('react-focus-lock', () => ({
-        ...testRunner.requireActual('react-focus-lock'),
+    testRunner.mock('@epam/uui-react-focus-lock-fork', () => ({
+        ...testRunner.requireActual('@epam/uui-react-focus-lock-fork'),
         __esModule: true,
         /**
          * @param {object} props - Component's props

uui-components/package.json

@@ -20,7 +20,7 @@
     "classnames": "2.2.6",
     "dayjs": "1.11.12",
     "react-fast-compare": "^3.2.2",
-    "react-focus-lock": "2.13.5",
+    "@epam/uui-react-focus-lock-fork": "2.13.8",
     "react-transition-group": "4.4.5"
   },
   "peerDependencies": {

uui-components/src/navigation/MainMenu/Burger/Burger.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import FocusLock from 'react-focus-lock';
+import FocusLock from '@epam/uui-react-focus-lock-fork';
 import {
     IHasCX, Icon, IHasRawProps, IHasForwardedRef,
 } from '@epam/uui-core';

uui-components/src/overlays/Dropdown.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useContext, us
 import {
     useFloating, autoUpdate, flip, shift, useMergeRefs, hide, arrow, useDismiss,
 } from '@floating-ui/react';
-import { FreeFocusInside } from 'react-focus-lock';
+import { FreeFocusInside } from '@epam/uui-react-focus-lock-fork';
 import { isEventTargetInsideClickable, UuiContext } from '@epam/uui-core';
 import type { LayoutLayer, DropdownProps } from '@epam/uui-core';
 import { getFallbackPlacements } from '../helpers';

uui-components/src/overlays/DropdownContainer.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock, { ReactFocusLockProps } from '@epam/uui-react-focus-lock-fork';
 import {
     uuiElement, IHasCX, IHasChildren, cx, IHasRawProps, uuiMarkers, IHasForwardedRef, IDropdownBodyProps,
     IHasStyleAttrs,
 } from '@epam/uui-core';
 import { VPanel } from '../layout/flexItems/VPanel';
 import PopoverArrow from './PopoverArrow';
-import { ReactFocusLockProps } from 'react-focus-lock';
 
 export interface DropdownContainerProps
     extends IHasCX,
@@ -60,7 +59,7 @@ export const DropdownContainer = React.forwardRef((props: DropdownContainerProps
     function renderDropdownContainer() {
         return (
             <VPanel
-                forwardedRef={ !focusLock ? ref as React.ForwardedRef<HTMLDivElement> : undefined }
+                forwardedRef={ !focusLock ? (ref as React.ForwardedRef<HTMLDivElement>) : undefined }
                 cx={ cx(uuiElement.dropdownBody, uuiMarkers.lockFocus, props.cx) }
                 style={ {
                     ...props.style,
@@ -91,7 +90,7 @@ export const DropdownContainer = React.forwardRef((props: DropdownContainerProps
                 persistentFocus={ persistentFocus }
                 lockProps={ { ...({ onKeyDown: props?.onKeyDown }), ...props.lockProps } }
                 shards={ props.shards }
-                autoFocus={ props.autoFocus || true }
+                autoFocus={ props.autoFocus ?? true }
                 as={ props.as }
             >
                 {renderDropdownContainer()}

uui-components/src/overlays/ModalBlocker.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock from '@epam/uui-react-focus-lock-fork';
 import css from './ModalBlocker.module.scss';
 import { ModalBlockerProps, UuiContext, cx, uuiElement } from '@epam/uui-core';
 

uui/components/navigation/MainMenu/MainMenuDropdown.tsx

@@ -1,5 +1,5 @@
 import React, { KeyboardEvent } from 'react';
-import FocusLock from 'react-focus-lock';
+import FocusLock from '@epam/uui-react-focus-lock-fork';
 import cx from 'classnames';
 import { Dropdown, MainMenuDropdownProps } from '@epam/uui-components';
 import { MainMenuButton } from './MainMenuButton';

uui/components/navigation/MainMenu/__tests__/__snapshots__/MainMenuDropdown.test.tsx.snap

@@ -32,54 +32,40 @@ exports[`MainMenuDropdown should be rendered correctly in opened state 1`] = `
     style="position: fixed; top: 0px; left: 0px; z-index: 2000;"
   >
     <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
-    <div
-      data-focus-lock-disabled="false"
+      class="dropdownBody uui-main_menu-dropdown"
+      role="menu"
     >
-      <div
-        class="dropdownBody uui-main_menu-dropdown"
-        role="menu"
+      <span
+        class="uui-button-box uui-enabled root type-primary"
+        tabindex="-1"
       >
-        <span
-          class="uui-button-box uui-enabled root type-primary"
-          tabindex="-1"
+        <div
+          class="uui-caption"
         >
-          <div
-            class="uui-caption"
-          >
-            Impact
-          </div>
-        </span>
-        <span
-          class="uui-button-box uui-enabled root type-primary"
-          tabindex="-1"
+          Impact
+        </div>
+      </span>
+      <span
+        class="uui-button-box uui-enabled root type-primary"
+        tabindex="-1"
+      >
+        <div
+          class="uui-caption"
         >
-          <div
-            class="uui-caption"
-          >
-            ENGX
-          </div>
-        </span>
-        <span
-          class="uui-button-box uui-enabled root type-primary"
-          tabindex="-1"
+          ENGX
+        </div>
+      </span>
+      <span
+        class="uui-button-box uui-enabled root type-primary"
+        tabindex="-1"
+      >
+        <div
+          class="uui-caption"
         >
-          <div
-            class="uui-caption"
-          >
-            Cloud
-          </div>
-        </span>
-      </div>
+          Cloud
+        </div>
+      </span>
     </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="0"
-    />
   </div>
 </body>
 `;

uui/components/pickers/DataPickerBody.tsx

@@ -4,16 +4,16 @@ import {
     IHasRawProps, usePrevious, DataRowProps, FlattenSearchResultsConfig,
 } from '@epam/uui-core';
 import { FlexCell } from '@epam/uui-components';
+import { MoveFocusInside } from '@epam/uui-react-focus-lock-fork';
+import isEqual from 'react-fast-compare';
 import { SearchInput } from '../inputs';
 import { FlexRow, VirtualList } from '../layout';
 import { Text } from '../typography';
 import { i18n } from '../../i18n';
 import { settings } from '../../settings';
 import css from './DataPickerBody.module.scss';
-import isEqual from 'react-fast-compare';
 import { DataPickerRow } from './DataPickerRow';
 import type { PickerInputProps } from './PickerInput';
-import { MoveFocusInside } from 'react-focus-lock';
 
 export interface DataPickerBodyModsOverride {}
 

uui/components/pickers/PickerModal.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { IHasCaption, PickerBaseOptions, PickerRenderRowParams } from '@epam/uui-core';
+import { MoveFocusInside } from '@epam/uui-react-focus-lock-fork';
 import { IconContainer, PickerModalArrayProps, PickerModalOptions, PickerModalScalarProps, handleDataSourceKeyboard, usePickerModal } from '@epam/uui-components';
 import { DataPickerRow } from './DataPickerRow';
 import { Text } from '../typography';
@@ -14,7 +15,6 @@ import { i18n } from '../../i18n';
 import { settings } from '../../settings';
 
 import css from './PickerModal.module.scss';
-import { MoveFocusInside } from 'react-focus-lock';
 
 export type PickerModalProps<TItem, TId> = PickerBaseOptions<TItem, TId> &
 IHasCaption &

uui/package.json

@@ -21,7 +21,7 @@
     "overlayscrollbars": "2.12.0",
     "overlayscrollbars-react": "0.5.6",
     "react-fast-compare": "3.2.2",
-    "react-focus-lock": "2.13.6"
+    "@epam/uui-react-focus-lock-fork": "2.13.8"
   },
   "peerDependencies": {
     "react": ">=16.0.0",