@basic-ui/material 1.0.0-alpha.36 → 1.0.0-alpha.38

package/build/cjs/index.js

@@ -1929,14 +1929,14 @@ const DialogBackdrop = /*#__PURE__*/react$1.forwardRef(function DialogBackdrop(p
   });
 });
 
-const Modal$1 = core.Modal;
+const Modal$2 = core.Modal;
 const BottomSheetSurface = /*#__PURE__*/react$1.forwardRef(function BottomSheetSurface(props, forwardedRef) {
   const {
     __css,
     ...otherProps
   } = props;
   const theme = useTheme();
-  return /*#__PURE__*/jsxRuntime.jsx(Modal$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Modal$2, {
     ref: forwardedRef,
     as: Paper,
     theme: theme,
@@ -3529,7 +3529,7 @@ const Divider = /*#__PURE__*/react$1.forwardRef(function Divider(props, forwarde
   });
 });
 
-const Modal = core.Modal;
+const Modal$1 = core.Modal;
 const DialogSurface = /*#__PURE__*/react$1.forwardRef(function DialogSurface(props, forwardedRef) {
   const {
     __css,
@@ -3538,7 +3538,7 @@ const DialogSurface = /*#__PURE__*/react$1.forwardRef(function DialogSurface(pro
   } = props;
   const theme = useTheme();
   const overlayValue = styledSystem.get(theme, 'dialogs.backgroundColorOverlay') || 0;
-  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
+  return /*#__PURE__*/jsxRuntime.jsx(Modal$1, {
     ref: forwardedRef,
     as: Paper,
     theme: theme,
@@ -3899,6 +3899,117 @@ const NavRailItem = /*#__PURE__*/react$1.forwardRef(function NavRailItem(props,
   });
 });
 
+const Modal = core.Modal;
+const PopoverSurface = /*#__PURE__*/react$1.forwardRef(function PopoverSurface(props, forwardedRef) {
+  const {
+    __css,
+    ...otherProps
+  } = props;
+  const theme = useTheme();
+  const overlayValue = styledSystem.get(theme, 'dialogs.backgroundColorOverlay') || 0;
+  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
+    ref: forwardedRef,
+    as: Paper,
+    theme: theme,
+    elevation: 3,
+    darkThemeBackgroundOverlay: overlayValue,
+    __css: {
+      position: 'relative',
+      borderRadius: 'extra-small',
+      overflow: 'auto',
+      pointerEvents: 'auto',
+      willChange: 'transform,opacity',
+      '[data-popper-placement="top"] &': {
+        transformOrigin: 'bottom center'
+      },
+      '[data-popper-placement="bottom"] &': {
+        transformOrigin: 'top center'
+      },
+      animation: `${growAnimation} .12s ${EASING_STANDARD}`,
+      ...__css
+    },
+    ...otherProps
+  });
+});
+
+const PopoverContainer = /*#__PURE__*/react$1.forwardRef(function PopoverContainer(props, forwardedRef) {
+  const {
+    __css,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
+    ref: forwardedRef,
+    __css: {
+      minWidth: ['100vw', 'auto'],
+      px: [3, 0],
+      pointerEvents: 'none',
+      ...__css
+    },
+    ...otherProps
+  });
+});
+
+const Popover = /*#__PURE__*/react$1.forwardRef(function Popover({
+  portalSelector,
+  open,
+  anchorEl,
+  placement = 'bottom',
+  strategy = 'fixed',
+  modifiers,
+  skidding,
+  distance = 0,
+  offsetFn,
+  arrowPadding,
+  onClose,
+  children,
+  backdropProps,
+  containerProps,
+  disableBackdropClick,
+  disableEscapeKeyDown,
+  ...otherProps
+}, forwardedRef) {
+  const ref = react$1.useRef(null);
+  react$1.useEffect(() => {
+    if (!anchorEl || !anchorEl.current) {
+      console.warn('<Popover /> will not open because it does not have an anchor element defined');
+    }
+  }, [anchorEl]);
+
+  if (!open || !anchorEl || !anchorEl.current) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
+    selector: portalSelector,
+    children: /*#__PURE__*/jsxRuntime.jsx(DialogBackdrop, {
+      onClose: onClose,
+      open: open,
+      disableCloseOnClick: disableBackdropClick,
+      disableEscapeKeyDown: disableEscapeKeyDown,
+      ...backdropProps,
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Popper, {
+        as: Box,
+        innerAs: "div",
+        anchorEl: anchorEl,
+        placement: placement,
+        strategy: strategy,
+        modifiers: modifiers,
+        skidding: skidding,
+        distance: distance,
+        offsetFn: offsetFn,
+        arrowPadding: arrowPadding,
+        children: /*#__PURE__*/jsxRuntime.jsx(PopoverContainer, { ...containerProps,
+          children: /*#__PURE__*/jsxRuntime.jsx(PopoverSurface, {
+            ref: core.assignMultipleRefs(forwardedRef, ref),
+            ...otherProps,
+            children: children
+          })
+        })
+      })
+    })
+  });
+});
+
 const innerDivRotate = react.keyframes({
   '0%': {
     transform: 'rotate(-90deg)'
@@ -5830,26 +5941,38 @@ const BaseTooltip = core.Tooltip;
 const Tooltip = /*#__PURE__*/react$1.forwardRef(function Tooltip(props, forwardedRef) {
   const {
     placement = 'bottom',
+    children,
     __css,
     ...otherProps
   } = props;
+  const cssStyle = {
+    variant: ['text.body-medium', 'text.body-small'],
+    bg: alpha('#616161', 0.9),
+    color: '#fff',
+    px: 2,
+    py: 1,
+    borderRadius: 'extra-small',
+    zIndex: 'tooltip',
+    ...__css
+  };
+
+  if (!children) {
+    return /*#__PURE__*/jsxRuntime.jsx(Box, {
+      ref: forwardedRef,
+      __css: cssStyle,
+      ...otherProps
+    });
+  }
+
   return /*#__PURE__*/jsxRuntime.jsx(BaseTooltip, {
     as: core.Popper,
     innerAs: Box,
     ref: forwardedRef,
     placement: placement,
     distance: 8,
-    __css: {
-      variant: ['text.body-medium', 'text.body-small'],
-      bg: alpha('#616161', 0.9),
-      color: '#fff',
-      px: 2,
-      py: 1,
-      borderRadius: 'extra-small',
-      zIndex: 'tooltip',
-      ...__css
-    },
-    ...otherProps
+    __css: cssStyle,
+    ...otherProps,
+    children: children
   });
 });
 
@@ -5919,6 +6042,7 @@ exports.NavRailLabel = NavRailLabel;
 exports.NotchedOutline = NotchedOutline;
 exports.OutlinedContainer = OutlinedContainer;
 exports.Paper = Paper;
+exports.Popover = Popover;
 exports.ProgressSpinner = ProgressSpinner;
 exports.RadioButton = RadioButton;
 exports.RadioGroup = RadioGroup;
@@ -5955,6 +6079,7 @@ exports.base = base;
 exports.getBackgroundOverlay = getBackgroundOverlay;
 exports.getColorOverlay = getColorOverlay;
 exports.getDarkThemeBackgroundOverlay = getDarkThemeBackgroundOverlay;
+exports.growAnimation = growAnimation;
 exports.listItemStyle = listItemStyle;
 exports.mixColor = mixColor;
 exports.rippleStyle = rippleStyle;