@innovaccer/design-system 4.30.0 → 4.30.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 4.30.1 (2026-09-09)
+
+### Highlights
+
+- Added a portal selector for scoped CSS support.
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Improvements
+
+- style(scoped-css): add portal selector for scoped css (e6966cbf8)
+
+---
+
 ## 4.30.0 (2026-09-07)
 
 ### Highlights

package/css/SCOPED_CSS.md

@@ -69,11 +69,19 @@ adds them to the prelude directly, targeting markup the components *already* ren
   [data-mds-root],                              /* your opt-in container */
   body > .Overlay-wrapper:has([data-layer]),    /* Modal, Sidesheet, FullscreenModal */
   body > [data-test='DesignSystem-Popover'],    /* Popover, Tooltip, Dropdown, Menu, … */
+  body > [data-floating-ui-portal],             /* same components, via @floating-ui/react's FloatingPortal */
   body > [data-test='DesignSystem-Backdrop'],   /* Backdrop */
   body > .Listbox-item--draggable               /* Listbox drag ghost */
 )
 ```
 
+`body > [data-floating-ui-portal]` is a second, additive root for the same Popover-built
+components: `PopperWrapper` now renders through `@floating-ui/react`'s `FloatingPortal`, which
+inserts its own `<div data-floating-ui-portal>` directly under `body` and nests the
+`data-test='DesignSystem-Popover'` element one level inside *that* — no longer a direct child
+of `body`. `data-floating-ui-portal` is set unconditionally by the library itself, so it keeps
+matching regardless of a component's (now overridable via a `dataTest` prop) `data-test` value.
+
 Every popper-based component shares one root — `Popover` renders the popup element itself and
 Tooltip/Dropdown/Menu all go through it — so a single selector covers them all.
 

package/css/dist/mds-scoped.css

@@ -349,7 +349,7 @@
     opacity: 0;
   }
 }
-@scope ([data-mds-root], body > .Overlay-wrapper:has([data-layer]), body > [data-test='DesignSystem-Popover'], body > [data-test='DesignSystem-Backdrop'], body > .Listbox-item--draggable) {
+@scope ([data-mds-root], body > .Overlay-wrapper:has([data-layer]), body > [data-test='DesignSystem-Popover'], body > [data-floating-ui-portal], body > [data-test='DesignSystem-Backdrop'], body > .Listbox-item--draggable) {
 /* Source: src/tokens/index.css */
 /**** Color Primitives ****/
 :scope {

package/css/scripts/portal-roots.cjs

@@ -34,6 +34,17 @@ const PORTAL_ROOT_SELECTORS = [
   'body > .Overlay-wrapper:has([data-layer])',
   /** Popover and everything built on it: Tooltip, Dropdown, Menu, DateRangePicker, … */
   "body > [data-test='DesignSystem-Popover']",
+  /**
+   * `PopperWrapper` now renders through `@floating-ui/react`'s `FloatingPortal`, which
+   * inserts its own `<div data-floating-ui-portal>` directly under `body` and nests the
+   * `data-test='DesignSystem-Popover'` element one level inside *that* — so the selector
+   * above no longer matches a direct child of `body` for any Popover-built component
+   * (Tooltip, Dropdown, Menu, Select, DateRangePicker, AvatarGroup, …). This selector
+   * targets the actual direct child instead. `data-floating-ui-portal` is set
+   * unconditionally by the library itself, so it doesn't depend on a component's
+   * (now overridable via a `dataTest` prop) `data-test` value.
+   */
+  'body > [data-floating-ui-portal]',
   /** Backdrop, including the one Modal/Sidesheet render. */
   "body > [data-test='DesignSystem-Backdrop']",
   /**