@chakra-ui/popover - npm Package Compare versions

Comparing version 1.0.0-next.6 to 1.0.0-next.7

CHANGELOG.md

@@ -6,2 +6,16 @@ # Change Log
 
+# [1.0.0-next.7](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/popover@1.0.0-next.6...@chakra-ui/popover@1.0.0-next.7) (2020-07-26)
+
+### Features
+
+- add popover transition and merge props util
+  ([112ff7b](https://github.com/chakra-ui/chakra-ui/commit/112ff7b53d7618f9a1442efa2fb427491a5fc51c))
+- **popover:** add prop to defer rendering till popover is open
+  ([aac438c](https://github.com/chakra-ui/chakra-ui/commit/aac438cf21e5cd0a160048d8ae0c1a26b99fd1f4))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [1.0.0-next.6](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/popover@1.0.0-next.5...@chakra-ui/popover@1.0.0-next.6) (2020-07-15)
@@ -8,0 +22,0 @@

dist/cjs/index.js

@@ -18,2 +18,9 @@ "use strict";
 });
+
+var _popover2 = require("./popover.transition");
+
+Object.keys(_popover2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  exports[key] = _popover2[key];
+});
 //# sourceMappingURL=index.js.map

dist/cjs/popover.js

@@ -8,8 +8,6 @@ "use strict";
 exports.PopoverArrow = PopoverArrow;
-exports.PopoverBody = exports.PopoverHeader = exports.PopoverContent = exports.PopoverTrigger = void 0;
+exports.PopoverBody = exports.PopoverHeader = exports.PopoverContent = exports.PopoverTrigger = exports.usePopoverContext = void 0;
 
 var _closeButton = require("@chakra-ui/close-button");
 
-var _hooks = require("@chakra-ui/hooks");
-
 var _system = require("@chakra-ui/system");
@@ -19,8 +17,6 @@
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _usePopover = require("./use-popover");
 
-var _transition = require("@chakra-ui/transition");
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -38,28 +34,22 @@
 }),
-    PopoverContextProvider = _createContext[0],
+    PopoverProvider = _createContext[0],
     usePopoverContext = _createContext[1];
 
+exports.usePopoverContext = usePopoverContext;
+
 /**
- * Popover
- *
- * React component used to Popovers are used to bring attention
- * to specific user interface elements, typically to suggest an
- * action or to guide users through a new experience.
+ * Popover is used to bring attention to specific user interface elements,
+ * typically to suggest an action or to guide users through a new experience.
  */
 function Popover(props) {
-  var styles = (0, _system.useStyleConfig)("Popover", props);
-  var motion = (0, _transition.useTransitionConfig)("Popover", props, {
-    content: "chakra-popover__content"
-  });
+  var styles = (0, _system.useMultiStyleConfig)("Popover", props);
 
   var _omitThemingProps = (0, _system.omitThemingProps)(props),
       children = _omitThemingProps.children,
-      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children"]);
+      otherProps = _objectWithoutPropertiesLoose(_omitThemingProps, ["children"]);
 
-  var context = (0, _usePopover.usePopover)(rest);
-  return /*#__PURE__*/React.createElement(PopoverContextProvider, {
+  var context = (0, _usePopover.usePopover)(otherProps);
+  return /*#__PURE__*/_react["default"].createElement(PopoverProvider, {
     value: context
-  }, /*#__PURE__*/React.createElement(_transition.TransitionsProvider, {
-    value: motion
-  }, /*#__PURE__*/React.createElement(_system.StylesProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_system.StylesProvider, {
     value: styles
@@ -69,3 +59,3 @@ }, (0, _utils.runIfFn)(children, {
     onClose: context.onClose
-  }))));
+  })));
 }
@@ -77,5 +67,3 @@
 /**
- * PopoverTrigger
- *
- * The trigger for the popover. It must be an interactive element
+ * PopoverTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
@@ -87,3 +75,3 @@ */
   // enforce a single child
-  var child = React.Children.only(props.children);
+  var child = _react.Children.only(props.children);
 
@@ -93,3 +81,3 @@ var _usePopoverContext = usePopoverContext(),
 
-  return /*#__PURE__*/React.cloneElement(child, getTriggerProps(child.props));
+  return /*#__PURE__*/(0, _react.cloneElement)(child, getTriggerProps(child.props, child.ref));
 };
@@ -104,35 +92,25 @@
 /**
- * PopoverContent
- *
- * The popover's content wrapper that includes all
- * accessibility requirements for a popover
+ * PopoverContent includes all accessibility
+ * requirements for a popover
  */
-var PopoverContent = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+var PopoverContent = /*#__PURE__*/_react["default"].forwardRef(function PopoverContent(props, ref) {
   var _usePopoverContext2 = usePopoverContext(),
-      isOpen = _usePopoverContext2.isOpen,
       getPopoverProps = _usePopoverContext2.getPopoverProps;
 
-  var popoverProps = getPopoverProps(_extends({}, props, {
-    ref: ref
-  }));
-  var cssRef = React.useRef();
-  popoverProps.ref = (0, _utils.mergeRefs)(popoverProps.ref, cssRef);
+  var popoverProps = getPopoverProps(props, ref);
   var styles = (0, _system.useStyles)();
-  var transitions = (0, _transition.useTransitions)();
-  return /*#__PURE__*/React.createElement(_transition.HiddenTransition, {
-    "in": isOpen,
-    classNames: transitions.content.className,
-    appear: true,
-    timeout: transitions.content.timeout,
-    nodeRef: cssRef
-  }, /*#__PURE__*/React.createElement(_system.chakra.section, _extends({
-    className: transitions.content.className
+
+  var contentStyles = _extends({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column"
+  }, styles.content);
+
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.section, _extends({
+    className: (0, _utils.cx)("chakra-popover__content")
   }, popoverProps, {
-    __css: _extends({
-      position: "relative",
-      display: "flex",
-      flexDirection: "column"
-    }, styles.content, transitions.content.styles)
-  })));
+    __css: contentStyles
+  }));
 });
+
 exports.PopoverContent = PopoverContent;
@@ -145,8 +123,6 @@
 /**
- * Popover Header
- *
- * This servers as the accessible header or label
+ * PopoverHeader is the accessible header or label
  * for the popover's content and it's first announced by screenreaders.
  */
-var PopoverHeader = /*#__PURE__*/React.forwardRef(function PopoverHeader(props, ref) {
+var PopoverHeader = /*#__PURE__*/_react["default"].forwardRef(function PopoverHeader(props, ref) {
   var _usePopoverContext3 = usePopoverContext(),
@@ -156,3 +132,3 @@ headerId = _usePopoverContext3.headerId,
 
-  (0, _hooks.useSafeLayoutEffect)(function () {
+  (0, _react.useEffect)(function () {
     setHasHeader.on();
@@ -162,7 +138,6 @@ return function () {
     };
-  }, []);
+  }, [setHasHeader]);
   var styles = (0, _system.useStyles)();
-  return /*#__PURE__*/React.createElement(_system.chakra.header, _extends({
-    className: "chakra-popover__header"
-  }, props, {
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.header, _extends({}, props, {
+    className: (0, _utils.cx)("chakra-popover__header", props.className),
     id: headerId,
@@ -173,2 +148,3 @@ ref: ref,
 });
+
 exports.PopoverHeader = PopoverHeader;
@@ -181,8 +157,6 @@
 /**
- * PopoverBody
- *
- * Serves as the main content area for the popover. Should contain
+ * PopoverBody is the main content area for the popover. Should contain
  * at least one interactive element.
  */
-var PopoverBody = /*#__PURE__*/React.forwardRef(function PopoverBody(props, ref) {
+var PopoverBody = /*#__PURE__*/_react["default"].forwardRef(function PopoverBody(props, ref) {
   var _usePopoverContext4 = usePopoverContext(),
@@ -192,3 +166,3 @@ bodyId = _usePopoverContext4.bodyId,
 
-  (0, _hooks.useSafeLayoutEffect)(function () {
+  (0, _react.useEffect)(function () {
     setHasBody.on();
@@ -198,7 +172,6 @@ return function () {
     };
-  }, []);
+  }, [setHasBody]);
   var styles = (0, _system.useStyles)();
-  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
-    className: "chakra-popover__body"
-  }, props, {
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.div, _extends({}, props, {
+    className: (0, _utils.cx)("chakra-popover__body", props.className),
     id: bodyId,
@@ -209,2 +182,3 @@ ref: ref,
 });
+
 exports.PopoverBody = PopoverBody;
@@ -218,5 +192,4 @@
   var styles = (0, _system.useStyles)();
-  return /*#__PURE__*/React.createElement(_system.chakra.footer, _extends({
-    className: "chakra-popover__footer"
-  }, props, {
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.footer, _extends({}, props, {
+    className: (0, _utils.cx)("chakra-popover__footer", props.className),
     __css: styles.footer
@@ -230,7 +203,2 @@ }));
 
-/**
- * PopoverCloseButton
- *
- * The button to close the popover
- */
 function PopoverCloseButton(props) {
@@ -240,3 +208,3 @@ var _usePopoverContext5 = usePopoverContext(),
 
-  return /*#__PURE__*/React.createElement(_closeButton.CloseButton, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_closeButton.CloseButton, _extends({
     size: "sm",
@@ -260,9 +228,12 @@ onClick: onClose,
 
+  var arrowProps = getArrowProps(props);
   var styles = (0, _system.useStyles)();
-  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
-    className: "chakra-popover__arrow"
-  }, getArrowProps(props), {
-    __css: _extends({
-      bg: "inherit"
-    }, styles.arrow)
+
+  var arrowStyles = _extends({
+    bg: "inherit"
+  }, styles.arrow);
+
+  return /*#__PURE__*/_react["default"].createElement(_system.chakra.div, _extends({}, arrowProps, {
+    className: (0, _utils.cx)("chakra-popover__arrow", props.className),
+    __css: arrowStyles
   }));
@@ -269,0 +240,0 @@ }

dist/cjs/popover.utils.js

 "use strict";
 
 exports.__esModule = true;
-exports.hasFocusWithin = hasFocusWithin;
-exports.useBlurOutside = useBlurOutside;
 exports.useFocusOnHide = useFocusOnHide;
@@ -20,47 +18,2 @@ exports.useFocusOnShow = useFocusOnShow;
 /**
- * Check if the event target is within the popover ref.
- *
- * @param ref the popover ref
- * @param event the blur event
- */
-function hasFocusWithin(popoverRef, event) {
-  if (!document.activeElement || !popoverRef.current) {
-    return false;
-  }
-
-  var target = event.relatedTarget || document.activeElement;
-  return popoverRef.current.contains(target);
-}
-/**
- * Popover hook to manage outside click or blur detection.
- * It listens for outside click and notifies us so we can
- * close the popover
- *
- * @param triggerRef - popover trigger ref
- * @param popoverRef - popover content ref
- * @param options popover options (visible and action)
- */
-
-
-function useBlurOutside(triggerRef, popoverRef, options) {
-  var onMouseDown = function onMouseDown(event) {
-    var _triggerRef$current;
-
-    if (options.visible && ((_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.contains(event.target))) {
-      event.preventDefault();
-    }
-  };
-
-  (0, _hooks.useEventListener)("mousedown", onMouseDown);
-  (0, _hooks.useEventListener)("touchstart", onMouseDown);
-  return function (event) {
-    var shouldClose = options.visible && !hasFocusWithin(popoverRef, event);
-
-    if (shouldClose) {
-      options.action();
-    }
-  };
-}
-
-/**
  * Popover hook to manage the focus when the popover closes or hides.
@@ -80,3 +33,3 @@ *
 
-  var onMouseDown = function onMouseDown(event) {
+  var onPointerDown = function onPointerDown(event) {
     if (!options.visible) return;
@@ -91,3 +44,4 @@ var target = event.target;
 
-  (0, _hooks.useEventListener)("mousedown", onMouseDown);
+  (0, _hooks.useEventListener)("mousedown", onPointerDown);
+  (0, _hooks.useEventListener)("touchstart", onPointerDown);
   (0, _hooks.useUpdateEffect)(function () {
@@ -94,0 +48,0 @@ return function () {

dist/cjs/use-popover.js

@@ -14,10 +14,8 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _popover = require("./popover.utils");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _interactions = require("@react-aria/interactions");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -56,3 +54,4 @@
       _props$closeDelay = _props.closeDelay,
-      closeDelay = _props$closeDelay === void 0 ? 200 : _props$closeDelay;
+      closeDelay = _props$closeDelay === void 0 ? 200 : _props$closeDelay,
+      isLazy = _props.isLazy;
 
@@ -65,5 +64,5 @@ var _useDisclosure = (0, _hooks.useDisclosure)(props),
 
-  var triggerRef = React.useRef(null);
-  var popoverRef = React.useRef(null);
-  var isHoveringRef = React.useRef(false);
+  var triggerRef = (0, _react.useRef)(null);
+  var popoverRef = (0, _react.useRef)(null);
+  var isHoveringRef = (0, _react.useRef)(false);
 
@@ -98,4 +97,3 @@ var _useBoolean = (0, _hooks.useBoolean)(),
       reference = _usePopper.reference,
-      arrow = _usePopper.arrow,
-      placement = _usePopper.placement;
+      arrow = _usePopper.arrow;
 
@@ -114,7 +112,13 @@ (0, _popover.useFocusOnHide)(popoverRef, {
   });
-  var onBlur = (0, _popover.useBlurOutside)(triggerRef, popoverRef, {
-    visible: !!(closeOnBlur && isOpen),
-    action: onClose
+  (0, _interactions.useInteractOutside)({
+    ref: popoverRef,
+    onInteractOutside: function onInteractOutside(event) {
+      var _triggerRef$current;
+
+      if (trigger === TRIGGER_TYPE.click && closeOnBlur && !((_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.contains(event.target))) {
+        onClose();
+      }
+    }
   });
-  var getPopoverProps = React.useCallback(function (props) {
+  var getPopoverProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -124,3 +128,8 @@ props = {};
 
+    if (ref === void 0) {
+      ref = null;
+    }
+
     var popoverProps = _extends({}, props, {
+      children: isLazy ? isOpen ? props.children : null : props.children,
       id: popoverId,
@@ -135,15 +144,8 @@ tabIndex: -1,
       }),
-      ref: (0, _utils.mergeRefs)(popoverRef, popper.ref, props.ref),
-      style: _extends({
-        transformOrigin: (0, _popper.toTransformOrigin)(placement)
-      }, props.style, popper.style),
+      ref: (0, _utils.mergeRefs)(popoverRef, popper.ref, ref),
+      style: _extends({}, props.style, popper.style),
       "aria-labelledby": hasHeader ? headerId : undefined,
-      "aria-describedby": hasBody ? bodyId : undefined,
-      "aria-hidden": !isOpen ? !isOpen : undefined
+      "aria-describedby": hasBody ? bodyId : undefined
     });
 
-    if (trigger === TRIGGER_TYPE.click) {
-      popoverProps.onBlur = (0, _utils.callAllHandlers)(props.onBlur, onBlur);
-    }
-
     if (trigger === TRIGGER_TYPE.hover) {
@@ -161,4 +163,4 @@ popoverProps.role = "tooltip";
     return popoverProps;
-  }, [popoverId, isOpen, popper.ref, placement, popper.style, hasHeader, headerId, hasBody, bodyId, trigger, closeOnEsc, onClose, onBlur, closeDelay]);
-  var getArrowProps = React.useCallback(function (props) {
+  }, [popoverId, isOpen, isLazy, popper.ref, popper.style, hasHeader, headerId, hasBody, bodyId, trigger, closeOnEsc, onClose, closeDelay]);
+  var getArrowProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -168,10 +170,14 @@ props = {};
 
+    if (ref === void 0) {
+      ref = null;
+    }
+
     return _extends({}, props, {
-      ref: (0, _utils.mergeRefs)(arrow.ref, props.ref),
+      ref: (0, _utils.mergeRefs)(arrow.ref, ref),
       style: _extends({}, props.style, arrow.style)
     });
   }, [arrow.ref, arrow.style]);
-  var openTimeout = React.useRef();
-  var closeTimeout = React.useRef();
-  var getTriggerProps = React.useCallback(function (props) {
+  var openTimeout = (0, _react.useRef)();
+  var closeTimeout = (0, _react.useRef)();
+  var getTriggerProps = (0, _react.useCallback)(function (props, ref) {
     if (props === void 0) {
@@ -181,5 +187,9 @@ props = {};
 
+    if (ref === void 0) {
+      ref = null;
+    }
+
     var triggerProps = _extends({}, props, {
       id: triggerId,
-      ref: (0, _utils.mergeRefs)(triggerRef, reference.ref, props.ref),
+      ref: (0, _utils.mergeRefs)(triggerRef, reference.ref, ref),
       "aria-haspopup": "dialog",
@@ -235,3 +245,3 @@ "aria-expanded": isOpen,
   }, [openDelay, closeDelay, isOpen, onToggle, popoverId, reference.ref, triggerId, trigger, onOpen, onClose]);
-  React.useEffect(function () {
+  (0, _react.useEffect)(function () {
     return function () {
@@ -238,0 +248,0 @@ if (openTimeout.current) {

dist/esm/index.js

 export * from "./popover";
 export * from "./use-popover";
+export * from "./popover.transition";
 //# sourceMappingURL=index.js.map

dist/esm/popover.js

@@ -6,25 +6,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { CloseButton } from "@chakra-ui/close-button";
-import { useSafeLayoutEffect } from "@chakra-ui/hooks";
-import { chakra, omitThemingProps, StylesProvider, useStyleConfig, useStyles } from "@chakra-ui/system";
-import { createContext, runIfFn, __DEV__, mergeRefs } from "@chakra-ui/utils";
-import * as React from "react";
+import { chakra, omitThemingProps, StylesProvider, useMultiStyleConfig, useStyles } from "@chakra-ui/system";
+import { createContext, cx, runIfFn, __DEV__ } from "@chakra-ui/utils";
+import React, { Children, cloneElement, useEffect } from "react";
 import { usePopover } from "./use-popover";
-import { HiddenTransition, useTransitionConfig, TransitionsProvider, useTransitions } from "@chakra-ui/transition";
-var [PopoverContextProvider, usePopoverContext] = createContext({
+var [PopoverProvider, usePopoverContext] = createContext({
   name: "PopoverContext",
   errorMessage: "usePopoverContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Popover />`"
 });
+export { usePopoverContext };
 
 /**
- * Popover
- *
- * React component used to Popovers are used to bring attention
- * to specific user interface elements, typically to suggest an
- * action or to guide users through a new experience.
+ * Popover is used to bring attention to specific user interface elements,
+ * typically to suggest an action or to guide users through a new experience.
  */
 export function Popover(props) {
-  var styles = useStyleConfig("Popover", props);
-  var motion = useTransitionConfig("Popover", props, {
-    content: "chakra-popover__content"
-  });
+  var styles = useMultiStyleConfig("Popover", props);
 
@@ -35,9 +28,7 @@ var _omitThemingProps = omitThemingProps(props),
   } = _omitThemingProps,
-      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children"]);
+      otherProps = _objectWithoutPropertiesLoose(_omitThemingProps, ["children"]);
 
-  var context = usePopover(rest);
-  return /*#__PURE__*/React.createElement(PopoverContextProvider, {
+  var context = usePopover(otherProps);
+  return /*#__PURE__*/React.createElement(PopoverProvider, {
     value: context
-  }, /*#__PURE__*/React.createElement(TransitionsProvider, {
-    value: motion
   }, /*#__PURE__*/React.createElement(StylesProvider, {
@@ -48,3 +39,3 @@ value: styles
     onClose: context.onClose
-  }))));
+  })));
 }
@@ -56,5 +47,3 @@
 /**
- * PopoverTrigger
- *
- * The trigger for the popover. It must be an interactive element
+ * PopoverTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
@@ -66,7 +55,7 @@ */
   // enforce a single child
-  var child = React.Children.only(props.children);
+  var child = Children.only(props.children);
   var {
     getTriggerProps
   } = usePopoverContext();
-  return /*#__PURE__*/React.cloneElement(child, getTriggerProps(child.props));
+  return /*#__PURE__*/cloneElement(child, getTriggerProps(child.props, child.ref));
 };
@@ -79,34 +68,23 @@
 /**
- * PopoverContent
- *
- * The popover's content wrapper that includes all
- * accessibility requirements for a popover
+ * PopoverContent includes all accessibility
+ * requirements for a popover
  */
 export var PopoverContent = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
   var {
-    isOpen,
     getPopoverProps
   } = usePopoverContext();
-  var popoverProps = getPopoverProps(_extends({}, props, {
-    ref
-  }));
-  var cssRef = React.useRef();
-  popoverProps.ref = mergeRefs(popoverProps.ref, cssRef);
+  var popoverProps = getPopoverProps(props, ref);
   var styles = useStyles();
-  var transitions = useTransitions();
-  return /*#__PURE__*/React.createElement(HiddenTransition, {
-    in: isOpen,
-    classNames: transitions.content.className,
-    appear: true,
-    timeout: transitions.content.timeout,
-    nodeRef: cssRef
-  }, /*#__PURE__*/React.createElement(chakra.section, _extends({
-    className: transitions.content.className
+
+  var contentStyles = _extends({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column"
+  }, styles.content);
+
+  return /*#__PURE__*/React.createElement(chakra.section, _extends({
+    className: cx("chakra-popover__content")
   }, popoverProps, {
-    __css: _extends({
-      position: "relative",
-      display: "flex",
-      flexDirection: "column"
-    }, styles.content, transitions.content.styles)
-  })));
+    __css: contentStyles
+  }));
 });
@@ -119,5 +97,3 @@
 /**
- * Popover Header
- *
- * This servers as the accessible header or label
+ * PopoverHeader is the accessible header or label
  * for the popover's content and it's first announced by screenreaders.
@@ -130,10 +106,9 @@ */
   } = usePopoverContext();
-  useSafeLayoutEffect(() => {
+  useEffect(() => {
     setHasHeader.on();
     return () => setHasHeader.off();
-  }, []);
+  }, [setHasHeader]);
   var styles = useStyles();
-  return /*#__PURE__*/React.createElement(chakra.header, _extends({
-    className: "chakra-popover__header"
-  }, props, {
+  return /*#__PURE__*/React.createElement(chakra.header, _extends({}, props, {
+    className: cx("chakra-popover__header", props.className),
     id: headerId,
@@ -150,5 +125,3 @@ ref: ref,
 /**
- * PopoverBody
- *
- * Serves as the main content area for the popover. Should contain
+ * PopoverBody is the main content area for the popover. Should contain
  * at least one interactive element.
@@ -161,10 +134,9 @@ */
   } = usePopoverContext();
-  useSafeLayoutEffect(() => {
+  useEffect(() => {
     setHasBody.on();
     return () => setHasBody.off();
-  }, []);
+  }, [setHasBody]);
   var styles = useStyles();
-  return /*#__PURE__*/React.createElement(chakra.div, _extends({
-    className: "chakra-popover__body"
-  }, props, {
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({}, props, {
+    className: cx("chakra-popover__body", props.className),
     id: bodyId,
@@ -182,5 +154,4 @@ ref: ref,
   var styles = useStyles();
-  return /*#__PURE__*/React.createElement(chakra.footer, _extends({
-    className: "chakra-popover__footer"
-  }, props, {
+  return /*#__PURE__*/React.createElement(chakra.footer, _extends({}, props, {
+    className: cx("chakra-popover__footer", props.className),
     __css: styles.footer
@@ -194,7 +165,2 @@ }));
 
-/**
- * PopoverCloseButton
- *
- * The button to close the popover
- */
 export function PopoverCloseButton(props) {
@@ -223,9 +189,12 @@ var {
   } = usePopoverContext();
+  var arrowProps = getArrowProps(props);
   var styles = useStyles();
-  return /*#__PURE__*/React.createElement(chakra.div, _extends({
-    className: "chakra-popover__arrow"
-  }, getArrowProps(props), {
-    __css: _extends({
-      bg: "inherit"
-    }, styles.arrow)
+
+  var arrowStyles = _extends({
+    bg: "inherit"
+  }, styles.arrow);
+
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({}, arrowProps, {
+    className: cx("chakra-popover__arrow", props.className),
+    __css: arrowStyles
   }));
@@ -232,0 +201,0 @@ }

dist/esm/popover.utils.js

 import { useUpdateEffect, useEventListener } from "@chakra-ui/hooks";
 import { focus, getFirstTabbableIn, isFocusable } from "@chakra-ui/utils";
 import * as React from "react";
-/**
- * Check if the event target is within the popover ref.
- *
- * @param ref the popover ref
- * @param event the blur event
- */
 
-export function hasFocusWithin(popoverRef, event) {
-  if (!document.activeElement || !popoverRef.current) {
-    return false;
-  }
-
-  var target = event.relatedTarget || document.activeElement;
-  return popoverRef.current.contains(target);
-}
 /**
- * Popover hook to manage outside click or blur detection.
- * It listens for outside click and notifies us so we can
- * close the popover
- *
- * @param triggerRef - popover trigger ref
- * @param popoverRef - popover content ref
- * @param options popover options (visible and action)
- */
-
-export function useBlurOutside(triggerRef, popoverRef, options) {
-  var onMouseDown = event => {
-    var _triggerRef$current;
-
-    if (options.visible && ((_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.contains(event.target))) {
-      event.preventDefault();
-    }
-  };
-
-  useEventListener("mousedown", onMouseDown);
-  useEventListener("touchstart", onMouseDown);
-  return event => {
-    var shouldClose = options.visible && !hasFocusWithin(popoverRef, event);
-
-    if (shouldClose) {
-      options.action();
-    }
-  };
-}
-
-/**
  * Popover hook to manage the focus when the popover closes or hides.
@@ -66,3 +22,3 @@ *
 
-  var onMouseDown = event => {
+  var onPointerDown = event => {
     if (!options.visible) return;
@@ -77,3 +33,4 @@ var target = event.target;
 
-  useEventListener("mousedown", onMouseDown);
+  useEventListener("mousedown", onPointerDown);
+  useEventListener("touchstart", onPointerDown);
   useUpdateEffect(() => {
@@ -80,0 +37,0 @@ return () => {

dist/esm/use-popover.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import { useBoolean, useDisclosure, useIds } from "@chakra-ui/hooks";
-import { usePopper, toTransformOrigin } from "@chakra-ui/popper";
+import { usePopper } from "@chakra-ui/popper";
 import { useColorModeValue, useToken } from "@chakra-ui/system";
 import { callAllHandlers, mergeRefs } from "@chakra-ui/utils";
-import * as React from "react";
-import { useBlurOutside, useFocusOnHide, useFocusOnShow } from "./popover.utils";
+import { useRef, useCallback, useEffect } from "react";
+import { useFocusOnHide, useFocusOnShow } from "./popover.utils";
+import { useInteractOutside } from "@react-aria/interactions";
 var TRIGGER_TYPE = {
@@ -32,3 +33,4 @@ click: "click",
     openDelay = 200,
-    closeDelay = 200
+    closeDelay = 200,
+    isLazy
   } = props;
@@ -41,5 +43,5 @@ var {
   } = useDisclosure(props);
-  var triggerRef = React.useRef(null);
-  var popoverRef = React.useRef(null);
-  var isHoveringRef = React.useRef(false);
+  var triggerRef = useRef(null);
+  var popoverRef = useRef(null);
+  var isHoveringRef = useRef(false);
   var [hasHeader, setHasHeader] = useBoolean();
@@ -54,4 +56,3 @@ var [hasBody, setHasBody] = useBoolean();
     reference,
-    arrow,
-    placement
+    arrow
   } = usePopper({
@@ -77,7 +78,13 @@ placement: placementProp,
   });
-  var onBlur = useBlurOutside(triggerRef, popoverRef, {
-    visible: !!(closeOnBlur && isOpen),
-    action: onClose
+  useInteractOutside({
+    ref: popoverRef,
+    onInteractOutside: event => {
+      var _triggerRef$current;
+
+      if (trigger === TRIGGER_TYPE.click && closeOnBlur && !((_triggerRef$current = triggerRef.current) == null ? void 0 : _triggerRef$current.contains(event.target))) {
+        onClose();
+      }
+    }
   });
-  var getPopoverProps = React.useCallback(function (props) {
+  var getPopoverProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -87,3 +94,8 @@ props = {};
 
+    if (ref === void 0) {
+      ref = null;
+    }
+
     var popoverProps = _extends({}, props, {
+      children: isLazy ? isOpen ? props.children : null : props.children,
       id: popoverId,
@@ -98,15 +110,8 @@ tabIndex: -1,
       }),
-      ref: mergeRefs(popoverRef, popper.ref, props.ref),
-      style: _extends({
-        transformOrigin: toTransformOrigin(placement)
-      }, props.style, popper.style),
+      ref: mergeRefs(popoverRef, popper.ref, ref),
+      style: _extends({}, props.style, popper.style),
       "aria-labelledby": hasHeader ? headerId : undefined,
-      "aria-describedby": hasBody ? bodyId : undefined,
-      "aria-hidden": !isOpen ? !isOpen : undefined
+      "aria-describedby": hasBody ? bodyId : undefined
     });
 
-    if (trigger === TRIGGER_TYPE.click) {
-      popoverProps.onBlur = callAllHandlers(props.onBlur, onBlur);
-    }
-
     if (trigger === TRIGGER_TYPE.hover) {
@@ -124,4 +129,4 @@ popoverProps.role = "tooltip";
     return popoverProps;
-  }, [popoverId, isOpen, popper.ref, placement, popper.style, hasHeader, headerId, hasBody, bodyId, trigger, closeOnEsc, onClose, onBlur, closeDelay]);
-  var getArrowProps = React.useCallback(function (props) {
+  }, [popoverId, isOpen, isLazy, popper.ref, popper.style, hasHeader, headerId, hasBody, bodyId, trigger, closeOnEsc, onClose, closeDelay]);
+  var getArrowProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -131,10 +136,14 @@ props = {};
 
+    if (ref === void 0) {
+      ref = null;
+    }
+
     return _extends({}, props, {
-      ref: mergeRefs(arrow.ref, props.ref),
+      ref: mergeRefs(arrow.ref, ref),
       style: _extends({}, props.style, arrow.style)
     });
   }, [arrow.ref, arrow.style]);
-  var openTimeout = React.useRef();
-  var closeTimeout = React.useRef();
-  var getTriggerProps = React.useCallback(function (props) {
+  var openTimeout = useRef();
+  var closeTimeout = useRef();
+  var getTriggerProps = useCallback(function (props, ref) {
     if (props === void 0) {
@@ -144,5 +153,9 @@ props = {};
 
+    if (ref === void 0) {
+      ref = null;
+    }
+
     var triggerProps = _extends({}, props, {
       id: triggerId,
-      ref: mergeRefs(triggerRef, reference.ref, props.ref),
+      ref: mergeRefs(triggerRef, reference.ref, ref),
       "aria-haspopup": "dialog",
@@ -198,3 +211,3 @@ "aria-expanded": isOpen,
   }, [openDelay, closeDelay, isOpen, onToggle, popoverId, reference.ref, triggerId, trigger, onOpen, onClose]);
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
@@ -201,0 +214,0 @@ if (openTimeout.current) {

dist/types/index.d.ts

 export * from "./popover";
 export * from "./use-popover";
+export * from "./popover.transition";

dist/types/popover.utils.d.ts

 import * as React from "react";
-/**
- * Check if the event target is within the popover ref.
- *
- * @param ref the popover ref
- * @param event the blur event
- */
-export declare function hasFocusWithin(popoverRef: React.RefObject<HTMLElement>, event: React.FocusEvent): boolean;
-/**
- * Popover hook to manage outside click or blur detection.
- * It listens for outside click and notifies us so we can
- * close the popover
- *
- * @param triggerRef - popover trigger ref
- * @param popoverRef - popover content ref
- * @param options popover options (visible and action)
- */
-export declare function useBlurOutside(triggerRef: React.RefObject<HTMLElement>, popoverRef: React.RefObject<HTMLElement>, options: {
-    action: () => void;
-    visible: boolean;
-}): (event: React.FocusEvent) => void;
 export interface UseFocusOnHideOptions {
@@ -23,0 +3,0 @@ focusRef: React.RefObject<HTMLElement>;

dist/types/use-popover.d.ts

 import { Placement, UsePopperProps } from "@chakra-ui/popper";
 import { Dict } from "@chakra-ui/utils";
-import * as React from "react";
+import { RefObject, Ref } from "react";
 declare const TRIGGER_TYPE: {
@@ -28,3 +28,3 @@ readonly click: "click";
      */
-    initialFocusRef?: React.RefObject<any>;
+    initialFocusRef?: RefObject<any>;
     /**
@@ -90,2 +90,8 @@ * If `true`, focus will be returned to the element that triggers the popover
     closeDelay?: number;
+    /**
+     * Performance 🚀:
+     * If `true`, the PopoverContent rendering will be deferred
+     * until the popover is open.
+     */
+    isLazy?: boolean;
 }
@@ -109,10 +115,10 @@ export declare function usePopover(props?: UsePopoverProps): {
     };
-    getArrowProps: (props?: Dict) => {
-        ref: (value: HTMLDivElement) => void;
+    getArrowProps: (props?: Dict, ref?: Ref<any>) => {
+        ref: (value: any) => void;
         style: any;
     };
-    getTriggerProps: (props?: Dict) => Record<string, any>;
-    getPopoverProps: (props?: Dict) => Record<string, any>;
+    getTriggerProps: (props?: Dict, ref?: Ref<any>) => Record<string, any>;
+    getPopoverProps: (props?: Dict, ref?: Ref<any>) => Record<string, any>;
 };
 export declare type UsePopoverReturn = ReturnType<typeof usePopover>;
 export {};

package.json

 {
   "name": "@chakra-ui/popover",
-  "version": "1.0.0-next.6",
+  "version": "1.0.0-next.7",
   "description": "A React component to render that renders it's content in a popover",
@@ -49,17 +49,18 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/close-button": "^1.0.0-next.6",
-    "@chakra-ui/hooks": "^1.0.0-next.6",
-    "@chakra-ui/popper": "^1.0.0-next.6",
-    "@chakra-ui/portal": "^1.0.0-next.6",
-    "@chakra-ui/transition": "^1.0.0-next.6",
-    "@chakra-ui/utils": "^1.0.0-next.6"
+    "@chakra-ui/close-button": "^1.0.0-next.7",
+    "@chakra-ui/hooks": "^1.0.0-next.7",
+    "@chakra-ui/popper": "^1.0.0-next.7",
+    "@chakra-ui/portal": "^1.0.0-next.7",
+    "@chakra-ui/transition": "^1.0.0-next.7",
+    "@chakra-ui/utils": "^1.0.0-next.7",
+    "@react-aria/interactions": "3.0.2"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.6"
+    "@chakra-ui/system": "^1.0.0-next.7"
   },
   "peerDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.5",
+    "@chakra-ui/system": "^1.0.0-next.7",
     "react": "16.x"
   },
-  "gitHead": "72eeca4ba3fc6e7d8845b0d283a03cb6ec384a50"
+  "gitHead": "3dcabd8c7e21b32ae1b61485588f70370c4e626f"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

212934

increased by0.81%

Number of package files

29

increased by20.83%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@react-aria/interactions@3.0.2

• + Added@react-aria/interactions@3.0.2(transitive)

• + Added@react-aria/ssr@3.9.5(transitive)

• + Added@react-aria/utils@3.25.2(transitive)

• + Added@react-stately/utils@3.10.3(transitive)

• + Added@react-types/shared@3.24.1(transitive)

• + Added@swc/helpers@0.5.13(transitive)

• + Addedclsx@2.1.1(transitive)

• Updated@chakra-ui/close-button@^1.0.0-next.7

• Updated@chakra-ui/hooks@^1.0.0-next.7

• Updated@chakra-ui/popper@^1.0.0-next.7

• Updated@chakra-ui/portal@^1.0.0-next.7

• Updated@chakra-ui/transition@^1.0.0-next.7

• Updated@chakra-ui/utils@^1.0.0-next.7