@expofp/ui 3.41.0 → 3.42.0

package/dist/components/Overlay/Overlay.js

@@ -6,6 +6,7 @@ import debounce from '../../shared/debounce';
 import { useKeyboardInset } from '../../shared/hooks/useKeyboardInset';
 import { useSheetDrag } from '../../shared/hooks/useSheetDrag';
 import { useWindowSize } from '../../shared/hooks/useWindowSize';
+import { OverlayHeaderContext } from './OverlayHeaderContext';
 import { OverlayScrollContext } from './OverlayScrollContext';
 const TRANSITION_DURATION = '0.3s';
 const DEFAULT_SCROLL_THRESHOLD = 10;
@@ -61,6 +62,8 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
         scrollRef.current = node;
         setScrollElement(node);
     }, []);
+    // The header slot, held as state for the same reason.
+    const [headerElement, setHeaderElement] = useState(null);
     // The snap point the sheet actually sits on. The prop may be undefined
     // before the host has chosen one, and a drag needs a value to start from.
     const [currentSnap, setCurrentSnap] = useState(size);
@@ -226,9 +229,9 @@ const Overlay = ({ children, open, size = 'medium', particles, className, onChan
                 'efp-overlay--scrolled': isScrolled,
                 'efp-overlay--forced-full': forceFull && mobile,
                 'efp-overlay--button-inset': mobile && withFloatingButton,
-            }, className), style: positioningStyles, ref: overlayPanelRef, onPointerDown: onPointerDown, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", "data-sheet-handle": true }), _jsxs("div", { className: "efp-overlay__scroll", ref: attachScroll, onScroll: () => {
+            }, className), style: positioningStyles, ref: overlayPanelRef, onPointerDown: onPointerDown, children: [!disableDrag && _jsx("div", { className: "efp-overlay__draghandle", "data-sheet-handle": true }), _jsx("div", { className: "efp-overlay__header", ref: setHeaderElement }), _jsxs("div", { className: "efp-overlay__scroll", ref: attachScroll, onScroll: () => {
                         handleScroll();
                         debouncedScrollActivity();
-                    }, children: [particles, _jsx("div", { className: "efp-overlay__content", children: children ? children : noContentLabel })] })] }) }));
+                    }, children: [particles, _jsx("div", { className: "efp-overlay__content", children: _jsx(OverlayHeaderContext, { value: headerElement, children: children ? children : noContentLabel }) })] })] }) }));
 };
 export default Overlay;

package/dist/components/Overlay/OverlayHeaderContext.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The overlay's header slot: a node above the scroll container that descendants can portal into
+ * (e.g. a toolbar that must not scroll with the content). Provided by {@link Overlay}; `null` when
+ * rendered outside an overlay.
+ */
+export declare const OverlayHeaderContext: import("react").Context<HTMLDivElement | null>;
+//# sourceMappingURL=OverlayHeaderContext.d.ts.map

package/dist/components/Overlay/OverlayHeaderContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+/**
+ * The overlay's header slot: a node above the scroll container that descendants can portal into
+ * (e.g. a toolbar that must not scroll with the content). Provided by {@link Overlay}; `null` when
+ * rendered outside an overlay.
+ */
+export const OverlayHeaderContext = createContext(null);

package/dist/components/Overlay/index.d.ts

@@ -1,4 +1,5 @@
 export type { OverlayProps, Size } from './Overlay';
 export { default } from './Overlay';
+export { OverlayHeaderContext } from './OverlayHeaderContext';
 export { OverlayScrollContext } from './OverlayScrollContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Overlay/index.js

@@ -1,2 +1,3 @@
 export { default } from './Overlay';
+export { OverlayHeaderContext } from './OverlayHeaderContext';
 export { OverlayScrollContext } from './OverlayScrollContext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/ui",
-  "version": "3.41.0",
+  "version": "3.42.0",
   "type": "module",
   "description": "ExpoFP SDK internal: shared pure React UI components",
   "homepage": "https://developer.expofp.com/",