@phreshos/react-ui 0.2.1 → 0.2.2

package/dist/dialog.js

@@ -11,7 +11,7 @@ import { scale } from "./foundation/scale.js";
 import { containerPadding } from "./foundation/spacing.js";
 import { useVisual } from "./foundation/visual.js";
 import { floatingShadow } from "./surface/shadow-options.js";
-import { Surface } from "./surface/surface.js";
+import { FloatingLayer, Surface } from "./surface/surface.js";
 export function DialogRoot({ children, ...state }) {
     return _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children });
 }
@@ -63,24 +63,24 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
                     maxWidth: maxWidth ?? `calc(100vw - ${inset * 2}px)`,
                     maxHeight: `calc(100vh - ${inset * 2}px)`,
                     outline: "none"
-                }, children: _jsx(Surface, { className: className, color: color, material: material, 
-                    // Dialog content is composed by its consumer, so no owned rounded shape
-                    // sits at a known inset; it keeps the plain Appearance radius like Popover.
-                    radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
-                        boxSizing: "border-box",
-                        width: "100%",
-                        maxHeight: "inherit",
-                        padding,
-                        overflow: "hidden",
-                        ...surfaceStyle
-                    }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
-                            display: "grid",
-                            gap: inset,
-                            minWidth: 0,
-                            minHeight: 0,
+                }, children: _jsx(FloatingLayer, { children: _jsx(Surface, { className: className, color: color, material: material, 
+                        // Dialog content is composed by its consumer, so no owned rounded shape
+                        // sits at a known inset; it keeps the plain Appearance radius like Popover.
+                        radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
+                            boxSizing: "border-box",
+                            width: "100%",
                             maxHeight: "inherit",
-                            outline: "none"
-                        }, children: children }) }) })] });
+                            padding,
+                            overflow: "hidden",
+                            ...surfaceStyle
+                        }, children: _jsx(AriaDialog, { ...properties, ref: ref, style: {
+                                display: "grid",
+                                gap: inset,
+                                minWidth: 0,
+                                minHeight: 0,
+                                maxHeight: "inherit",
+                                outline: "none"
+                            }, children: children }) }) }) })] });
 });
 export const DialogHeader = forwardRef(function DialogHeader({ style, ...properties }, ref) {
     const gap = scale(useVisual().spacing, "small");

package/dist/panel.js

@@ -6,7 +6,7 @@ import { resolveRadius } from "./foundation/radius.js";
 import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { paintClass, usePaintClasses } from "./surface/paint-class.js";
-import { Surface } from "./surface/surface.js";
+import { FloatingLayer, Surface } from "./surface/surface.js";
 import { containerPadding } from "./foundation/spacing.js";
 const PanelContext = createContext({ color: undefined, hasHeader: false, radius: undefined });
 export const PanelHeader = forwardRef(function PanelHeader({ style, ...properties }, ref) {
@@ -29,14 +29,14 @@ export const PanelRoot = forwardRef(function Panel({ children, style, ...propert
     const hasHeader = Children.toArray(children).some(child => isValidElement(child) && child.type === PanelHeader);
     // The shell and its content share one radius: the Appearance radius.
     const radius = resolveRadius(properties.radius ?? "medium", useVisual().radius);
-    return _jsx(PanelContext.Provider, { value: { color: properties.color, hasHeader, radius }, children: _jsx(Surface, { material: "full", ...properties, ref: ref, radius: radius, style: {
-                display: "grid",
-                gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
-                minWidth: 0,
-                minHeight: 0,
-                maxHeight: "inherit",
-                ...style
-            }, children: children }) });
+    return _jsx(PanelContext.Provider, { value: { color: properties.color, hasHeader, radius }, children: _jsx(FloatingLayer, { children: _jsx(Surface, { material: "full", ...properties, ref: ref, radius: radius, style: {
+                    display: "grid",
+                    gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+                    minWidth: 0,
+                    minHeight: 0,
+                    maxHeight: "inherit",
+                    ...style
+                }, children: children }) }) });
 });
 export const PanelContent = forwardRef(function PanelContent({ className, style, ...properties }, ref) {
     const { spacing } = useVisual();

package/dist/popover.js

@@ -10,7 +10,7 @@ import { resolveDirectionalPlacement } from "./foundation/overlay-placement.js";
 import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { floatingShadow } from "./surface/shadow-options.js";
-import { Surface } from "./surface/surface.js";
+import { FloatingLayer, Surface } from "./surface/surface.js";
 export function PopoverRoot({ children, ...state }) {
     return _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children });
 }
@@ -22,13 +22,13 @@ const PositionedContent = forwardRef(function PositionedContent({ children, clas
     const inset = scale(visual.spacing, "small");
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...attributes, isNonModal: nonModal, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, shadow: shadow ?? floatingShadow(visual.shadow), radius: radius, style: {
-                        boxSizing: "border-box",
-                        maxWidth: `calc(100vw - ${inset * 2}px)`,
-                        maxHeight: `calc(100vh - ${inset * 2}px)`,
-                        outline: "none",
-                        ...style
-                    }, children: children }) })] });
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...attributes, isNonModal: nonModal, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(FloatingLayer, { children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, shadow: shadow ?? floatingShadow(visual.shadow), radius: radius, style: {
+                            boxSizing: "border-box",
+                            maxWidth: `calc(100vw - ${inset * 2}px)`,
+                            maxHeight: `calc(100vh - ${inset * 2}px)`,
+                            outline: "none",
+                            ...style
+                        }, children: children }) }) })] });
 });
 export const PopoverContent = forwardRef(function PopoverContent(properties, ref) {
     return _jsx(PositionedContent, { ...properties, ref: ref });

package/dist/surface/surface.d.ts

@@ -47,6 +47,13 @@ export interface SurfaceInteraction {
     /** Marks a value-holding Surface whose current value is rejected. */
     readonly invalid?: boolean;
 }
+/**
+ * A layer that floats above everything, such as a popover, a dialog, or a panel: it is not inside the
+ * Surface it was opened from, so what it holds has nothing around it to keep apart from.
+ */
+export declare function FloatingLayer({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
 /**
  * How far a nested Surface keeps from the one it sits on: farther on a dark canvas, where
  * differences read smaller.

package/dist/surface/surface.js

@@ -9,6 +9,13 @@ import { resolveMaterialOptions } from "./material-options.js";
 import { resolveShadowOptions, shadowStyle } from "./shadow-options.js";
 /** The resting paint of the nearest painted Surface around, which a nested Surface keeps apart from. */
 const SurroundingPaint = createContext(null);
+/**
+ * A layer that floats above everything, such as a popover, a dialog, or a panel: it is not inside the
+ * Surface it was opened from, so what it holds has nothing around it to keep apart from.
+ */
+export function FloatingLayer({ children }) {
+    return _jsx(SurroundingPaint.Provider, { value: null, children: children });
+}
 /**
  * How far a nested Surface keeps from the one it sits on: farther on a dark canvas, where
  * differences read smaller.

package/dist/tooltip.js

@@ -11,7 +11,7 @@ import { scale } from "./foundation/scale.js";
 import { useVisual } from "./foundation/visual.js";
 import { timing } from "./foundation/timing.js";
 import { floatingShadow } from "./surface/shadow-options.js";
-import { Surface } from "./surface/surface.js";
+import { FloatingLayer, Surface } from "./surface/surface.js";
 export function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }) {
     // A pointer resting on a trigger for four changes in place is asking what it is.
     const rest = timing("change", { tempo: useVisual().appearance.tempo }).duration * 4;
@@ -25,16 +25,16 @@ export const TooltipContent = forwardRef(function TooltipContent({ children, cla
     const inset = scale(visual.spacing, "small");
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
-                        boxSizing: "border-box",
-                        maxWidth: "28em",
-                        paddingBlock: inset,
-                        paddingInline: inset * 1.5,
-                        outline: "none",
-                        fontSize: controlFontSizes.small,
-                        lineHeight: controlLineHeight,
-                        ...style
-                    }, children: children }) })] });
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(FloatingLayer, { children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
+                            boxSizing: "border-box",
+                            maxWidth: "28em",
+                            paddingBlock: inset,
+                            paddingInline: inset * 1.5,
+                            outline: "none",
+                            fontSize: controlFontSizes.small,
+                            lineHeight: controlLineHeight,
+                            ...style
+                        }, children: children }) }) })] });
 });
 /** A description shown from the focus and hover state of its trigger. */
 export const Tooltip = Object.assign(TooltipRoot, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,