@prizmui/components 0.1.5 → 0.1.7

package/dist/components/Popover/PopoverSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverSurface.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAMhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA0ClD,CAAC"}
+{"version":3,"file":"PopoverSurface.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAMhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA8ClD,CAAC"}

package/dist/components/Popover/PopoverSurface.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
-import { useContext } from 'jsx-framework-test-pb';
+import { useContext, createPortal } from 'jsx-framework-test-pb';
 import { PrizmProvider } from '../PrizmProvider/PrizmProvider';
 import { ThemeContext } from '../PrizmProvider/ThemeContext';
 import { PopoverContext } from './Popover.context';
-import { usePopoverSurfaceBaseClass, popoverSurfaceClassNames } from './usePopoverSurfaceStyles.styles';
+import { usePopoverSurfaceStyles, popoverSurfaceClassNames } from './usePopoverSurfaceStyles.styles';
 export const PopoverSurface = (props) => {
     const context = useContext(PopoverContext);
     const theme = useContext(ThemeContext);
-    const surfaceClass = usePopoverSurfaceBaseClass();
+    const surfaceStyles = usePopoverSurfaceStyles();
     const { children } = props;
     // Return a reactive function — the framework calls createReactiveChild on it,
     // so the surface is added to / removed from the DOM as open.val changes.
@@ -16,19 +16,20 @@ export const PopoverSurface = (props) => {
             return null;
         const trigger = document.getElementById(context.triggerId);
         const rect = trigger?.getBoundingClientRect();
-        return (_jsx(PrizmProvider, { theme: theme, style: {
-                position: 'absolute',
+        return createPortal(_jsx(PrizmProvider, { theme: theme, style: {
+                position: 'fixed',
                 top: '0',
                 left: '0',
                 right: '0',
                 bottom: '0',
                 zIndex: '1000000',
                 backgroundColor: 'transparent',
-                pointerEvents: 'none',
-            }, children: _jsx("div", { className: `${popoverSurfaceClassNames.root} ${surfaceClass}`, style: {
+                // Catches all clicks — those outside the surface close the popover
+                pointerEvents: 'auto',
+            }, onClick: () => { context.open.val = false; }, children: _jsx("div", { className: `${popoverSurfaceClassNames.root} ${surfaceStyles.root}`, style: {
                     position: 'absolute',
                     top: rect ? `${rect.bottom + 8}px` : '0',
                     left: rect ? `${rect.left}px` : '0',
-                }, children: children }) }));
+                }, onClick: (e) => e.stopPropagation(), children: children }) }), document.body);
     });
 };

package/dist/components/Popover/usePopoverSurfaceStyles.styles.d.ts

@@ -1,5 +1,5 @@
 import type { SlotClassNames } from '../../utilities';
 import type { PopoverSurfaceSlots } from './Popover.types';
 export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
-export declare const usePopoverSurfaceBaseClass: (options?: import("calame").MakeResetStylesOptions) => string;
+export declare const usePopoverSurfaceStyles: (options?: import("calame").MakeStylesOptions) => Record<"root", string>;
 //# sourceMappingURL=usePopoverSurfaceStyles.styles.d.ts.map

package/dist/components/Popover/usePopoverSurfaceStyles.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverSurfaceStyles.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/usePopoverSurfaceStyles.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,eAAO,MAAM,wBAAwB,EAAE,cAAc,CAAC,mBAAmB,CAExE,CAAC;AAEF,eAAO,MAAM,0BAA0B,+DAQrC,CAAC"}
+{"version":3,"file":"usePopoverSurfaceStyles.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/usePopoverSurfaceStyles.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,eAAO,MAAM,wBAAwB,EAAE,cAAc,CAAC,mBAAmB,CAExE,CAAC;AAEF,eAAO,MAAM,uBAAuB,0EASlC,CAAC"}

package/dist/components/Popover/usePopoverSurfaceStyles.styles.js

@@ -1,14 +1,15 @@
-import { makeResetStyles } from 'calame';
+import { makeStyles } from 'calame';
 import { tokens } from '@prizmui/tokens';
 export const popoverSurfaceClassNames = {
-    root: 'c-popover-surface',
+    root: 'c-PopoverSurface',
 };
-export const usePopoverSurfaceBaseClass = makeResetStyles({
-    backgroundColor: tokens.colorNeutralBackground1,
-    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
-    borderRadius: tokens.borderRadiusMedium,
-    boxShadow: '0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12)',
-    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
-    minWidth: '160px',
-    pointerEvents: 'auto',
+export const usePopoverSurfaceStyles = makeStyles({
+    root: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: '0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12)',
+        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+        minWidth: '160px',
+    },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prizmui/components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,8 +14,8 @@
     "dist"
   ],
   "dependencies": {
-    "@prizmui/tokens": "0.0.5",
-    "calame": "0.0.6"
+    "calame": "0.0.6",
+    "@prizmui/tokens": "0.0.5"
   },
   "peerDependencies": {
     "jsx-framework-test-pb": "*"