@spaced-out/ui-design-system 0.3.49 → 0.3.51-beta.0

package/lib/utils/click-away/click-away.js.flow

@@ -36,6 +36,28 @@ export type ClickAwayProps = {
   children: (props: ChildProps) => React.Node,
   onChange?: (isOpen: boolean) => mixed,
   clickAwayRef?: ClickAwayRefType,
+  /**
+   * When containsNestedFloatingPortals is true, prevents ClickAway from closing the dropdown if the click target
+   * is inside a floating portal root element.
+   *
+   * This is necessary for nested dropdowns rendered using floating portals,
+   * such as via `@floating-ui/react`. Floating portals render elements outside
+   * the normal DOM tree (often directly into `document.body` or another container)
+   * using `ReactDOM.createPortal`. As a result, these nested dropdowns do not
+   * appear inside the parent dropdown's `boundaryRef` or `triggerRef` subtree.
+   *
+   * To address this, the floating portal ensures that all nested dropdowns
+   * are mounted into a **shared root element** — effectively maintaining a
+   * common DOM ancestry. This allows parent dropdowns to detect when clicks
+   * occur within any of their nested children, even if rendered via portals.
+   * The shared root element is the closest parent element that has a `data-floating-ui-portal` attribute.
+   * Because of this, the ClickAway logic will not close the parent menu if the click target is inside boundaryRef's parentElement.
+   *
+   * Enabling `containsNestedFloatingPortals` allows the ClickAway logic to account
+   * for this shared root and avoids incorrectly closing the parent menu when
+   * interacting with nested dropdowns.
+   */
+  containsNestedFloatingPortals?: boolean,
 };
 
 type ClickAwayState = {
@@ -48,8 +70,10 @@ type ClickAwayState = {
 
 export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   static defaultProps: {
+    containsNestedFloatingPortals?: boolean,
     closeOnEscapeKeypress?: boolean,
   } = {
+      containsNestedFloatingPortals: false,
       closeOnEscapeKeypress: true,
     };
 
@@ -145,6 +169,16 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   };
 
   handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
+    if (
+      evt.target instanceof Node &&
+      this.props.containsNestedFloatingPortals &&
+      this.boundaryRef.current?.parentElement &&
+      (this.boundaryRef.current.parentElement === evt.target ||
+        this.boundaryRef.current.parentElement.contains(evt.target))
+    ) {
+      return;
+    }
+
     if (
       evt.target instanceof Node &&
       this.boundaryRef &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.49",
+  "version": "0.3.51-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -40,8 +40,8 @@
     "Sense"
   ],
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.0",
@@ -99,8 +99,8 @@
     "lint-staged": "^10.5.1",
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",