@carto/ps-react-ui 6.5.0 → 6.5.1

package/src/widgets/toolbox/toolbox.tsx

@@ -26,6 +26,7 @@ import { Close as CloseIcon } from '@mui/icons-material'
 import { WidgetOptions } from '@carto/meridian-ds/custom-icons'
 import { Tooltip } from '../../components'
 import { DEFAULT_TOOLBOX_LABELS, type ToolboxLabels } from './labels'
+import { useWrapperCollapsed } from '../wrapper/collapsed-context'
 import { styles } from './style'
 
 export interface ToolboxProps {
@@ -166,6 +167,14 @@ export function Toolbox({
     setOpen(false)
   }
 
+  // Same pattern when the enclosing Wrapper collapses: its Accordion keeps
+  // the details mounted, so the portalled popper would otherwise stay open
+  // over the page with no visible trigger.
+  const collapsed = useWrapperCollapsed()
+  if (collapsed && open) {
+    setOpen(false)
+  }
+
   // Reparent the host into the active shell whenever `open` (or either
   // shell) changes. `useLayoutEffect` runs synchronously after commit
   // (after refs have been written), so the popover Paper ref is already

package/src/widgets/wrapper/collapsed-context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Whether the enclosing `<Wrapper>` is collapsed. The Accordion keeps its
+ * details mounted, so content that opens portalled UI (the Toolbox popper)
+ * reads this to close it. `false` outside a Wrapper.
+ */
+export const WrapperCollapsedContext = createContext(false)
+
+export function useWrapperCollapsed(): boolean {
+  return useContext(WrapperCollapsedContext)
+}

package/src/widgets/wrapper/widget-wrapper.tsx

@@ -24,6 +24,7 @@ import { useWidget, useWidgetId } from '../stores'
 import { Actions, Options } from './widget-actions'
 import { styles } from './style'
 import { DEFAULT_WRAPPER_LABELS, type WrapperLabels } from './labels'
+import { WrapperCollapsedContext } from './collapsed-context'
 
 export interface WrapperProps {
   title: string
@@ -192,7 +193,11 @@ export function Wrapper({
           </Box>
         )}
       </Box>
-      <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
+      <AccordionDetails sx={styles.detail}>
+        <WrapperCollapsedContext.Provider value={effectiveCollapsed}>
+          {detailsSlots}
+        </WrapperCollapsedContext.Provider>
+      </AccordionDetails>
     </Accordion>
   )
 }