@chakra-ui/popper - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

CHANGELOG.md

 # Change Log
 
+## 2.4.1
+
+### Patch Changes
+
+- [#5075](https://github.com/chakra-ui/chakra-ui/pull/5075)
+  [`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)
+  Thanks [@cschroeter](https://github.com/cschroeter)! - Update babel config to
+  transpile soruces for older browsers. This fixes issues with CRA and
+  Storybook.
+- Updated dependencies
+  [[`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)]:
+  - @chakra-ui/react-utils@1.2.1
+
 ## 2.4.0
@@ -4,0 +17,0 @@

dist/chakra-ui-popper.cjs.dev.js

@@ -9,8 +9,43 @@ 'use strict';
 
-const toVar = (value, fallback) => ({
-  var: value,
-  varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`
-});
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-const cssVars = {
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+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);
+}
+
+var toVar = function toVar(value, fallback) {
+  return {
+    "var": value,
+    varRef: fallback ? "var(" + value + ", " + fallback + ")" : "var(" + value + ")"
+  };
+};
+
+var cssVars = {
   arrowShadowColor: toVar("--popper-arrow-shadow-color"),
@@ -24,8 +59,8 @@ arrowSize: toVar("--popper-arrow-size", "8px"),
 function getBoxShadow(placement) {
-  if (placement.includes("top")) return `1px 1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("bottom")) return `-1px -1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("right")) return `-1px 1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("left")) return `1px -1px 1px 0 var(--popper-arrow-shadow-color)`;
+  if (placement.includes("top")) return "1px 1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("bottom")) return "-1px -1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("right")) return "-1px 1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("left")) return "1px -1px 1px 0 var(--popper-arrow-shadow-color)";
 }
-const transforms = {
+var transforms = {
   top: "bottom center",
@@ -44,4 +79,6 @@ "top-start": "bottom left",
 };
-const toTransformOrigin = placement => transforms[placement];
-const defaultEventListeners = {
+var toTransformOrigin = function toTransformOrigin(placement) {
+  return transforms[placement];
+};
+var defaultEventListeners = {
   scroll: true,
@@ -51,3 +88,3 @@ resize: true
 function getEventListenerOptions(value) {
-  let eventListeners;
+  var eventListeners;
 
@@ -57,5 +94,3 @@ if (typeof value === "object") {
       enabled: true,
-      options: { ...defaultEventListeners,
-        ...value
-      }
+      options: _extends({}, defaultEventListeners, value)
     };
@@ -77,3 +112,3 @@ } else {
 
-const matchWidth = {
+var matchWidth = {
   name: "matchWidth",
@@ -83,12 +118,12 @@ enabled: true,
   requires: ["computeStyles"],
-  fn: ({
-    state
-  }) => {
-    state.styles.popper.width = `${state.rects.reference.width}px`;
+  fn: function fn(_ref) {
+    var state = _ref.state;
+    state.styles.popper.width = state.rects.reference.width + "px";
   },
-  effect: ({
-    state
-  }) => () => {
-    const reference = state.elements.reference;
-    state.elements.popper.style.width = `${reference.offsetWidth}px`;
+  effect: function effect(_ref2) {
+    var state = _ref2.state;
+    return function () {
+      var reference = state.elements.reference;
+      state.elements.popper.style.width = reference.offsetWidth + "px";
+    };
   }
@@ -103,20 +138,20 @@ };
 
-const transformOrigin = {
+var transformOrigin = {
   name: "transformOrigin",
   enabled: true,
   phase: "write",
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref3) {
+    var state = _ref3.state;
     setTransformOrigin(state);
   },
-  effect: ({
-    state
-  }) => () => {
-    setTransformOrigin(state);
+  effect: function effect(_ref4) {
+    var state = _ref4.state;
+    return function () {
+      setTransformOrigin(state);
+    };
   }
 };
 
-const setTransformOrigin = state => {
-  state.elements.popper.style.setProperty(cssVars.transformOrigin.var, toTransformOrigin(state.placement));
+var setTransformOrigin = function setTransformOrigin(state) {
+  state.elements.popper.style.setProperty(cssVars.transformOrigin["var"], toTransformOrigin(state.placement));
 };
@@ -129,9 +164,8 @@ /* -------------------------------------------------------------------------------------------------
 
-const positionArrow = {
+var positionArrow = {
   name: "positionArrow",
   enabled: true,
   phase: "afterWrite",
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref5) {
+    var state = _ref5.state;
     setArrowStyles(state);
@@ -141,19 +175,15 @@ }
 
-const setArrowStyles = state => {
+var setArrowStyles = function setArrowStyles(state) {
+  var _state$elements;
+
   if (!state.placement) return;
-  const overrides = getArrowStyle$1(state.placement);
+  var overrides = getArrowStyle$1(state.placement);
 
-  if (state.elements?.arrow && overrides) {
-    Object.assign(state.elements.arrow.style, {
-      [overrides.property]: overrides.value,
-      width: cssVars.arrowSize.varRef,
-      height: cssVars.arrowSize.varRef,
-      zIndex: -1
-    });
-    const vars = {
-      [cssVars.arrowSizeHalf.var]: `calc(${cssVars.arrowSize.varRef} / 2)`,
-      [cssVars.arrowOffset.var]: `calc(${cssVars.arrowSizeHalf.varRef} * -1)`
-    };
+  if ((_state$elements = state.elements) != null && _state$elements.arrow && overrides) {
+    var _Object$assign, _vars;
 
-    for (const property in vars) {
+    Object.assign(state.elements.arrow.style, (_Object$assign = {}, _Object$assign[overrides.property] = overrides.value, _Object$assign.width = cssVars.arrowSize.varRef, _Object$assign.height = cssVars.arrowSize.varRef, _Object$assign.zIndex = -1, _Object$assign));
+    var vars = (_vars = {}, _vars[cssVars.arrowSizeHalf["var"]] = "calc(" + cssVars.arrowSize.varRef + " / 2)", _vars[cssVars.arrowOffset["var"]] = "calc(" + cssVars.arrowSizeHalf.varRef + " * -1)", _vars);
+
+    for (var property in vars) {
       state.elements.arrow.style.setProperty(property, vars[property]);
@@ -164,3 +194,3 @@ }
 
-const getArrowStyle$1 = placement => {
+var getArrowStyle$1 = function getArrowStyle(placement) {
   if (placement.startsWith("top")) {
@@ -200,3 +230,3 @@ return {
 
-const innerArrow = {
+var innerArrow = {
   name: "innerArrow",
@@ -206,17 +236,17 @@ enabled: true,
   requires: ["arrow"],
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref6) {
+    var state = _ref6.state;
     setInnerArrowStyles(state);
   },
-  effect: ({
-    state
-  }) => () => {
-    setInnerArrowStyles(state);
+  effect: function effect(_ref7) {
+    var state = _ref7.state;
+    return function () {
+      setInnerArrowStyles(state);
+    };
   }
 };
 
-const setInnerArrowStyles = state => {
+var setInnerArrowStyles = function setInnerArrowStyles(state) {
   if (!state.elements.arrow) return;
-  const inner = state.elements.arrow.querySelector("[data-popper-arrow-inner]");
+  var inner = state.elements.arrow.querySelector("[data-popper-arrow-inner]");
   if (!inner) return;
@@ -236,3 +266,3 @@ Object.assign(inner.style, {
 
-const logicals = {
+var logicals = {
   "start-start": {
@@ -263,3 +293,3 @@ ltr: "left-start",
 };
-const opposites = {
+var opposites = {
   "auto-start": "auto-end",
@@ -272,41 +302,60 @@ "auto-end": "auto-start",
 };
-function getPopperPlacement(placement, dir = "ltr") {
-  const value = logicals[placement]?.[dir] || placement;
+function getPopperPlacement(placement, dir) {
+  var _logicals$placement, _opposites$placement;
+
+  if (dir === void 0) {
+    dir = "ltr";
+  }
+
+  var value = ((_logicals$placement = logicals[placement]) == null ? void 0 : _logicals$placement[dir]) || placement;
   if (dir === "ltr") return value;
-  return opposites[placement] ?? value;
+  return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
 }
 
-function usePopper(props = {}) {
-  const {
-    enabled = true,
-    modifiers,
-    placement: placementProp = "bottom",
-    strategy = "absolute",
-    arrowPadding = 8,
-    eventListeners = true,
-    offset,
-    gutter = 8,
-    flip = true,
-    boundary = "clippingParents",
-    preventOverflow = true,
-    matchWidth: matchWidth$1,
-    direction = "ltr"
-  } = props;
-  const reference = react.useRef(null);
-  const popper = react.useRef(null);
-  const instance = react.useRef(null);
-  const placement = getPopperPlacement(placementProp, direction);
-  const cleanup = react.useRef(() => {});
-  const setupPopper = react.useCallback(() => {
+var _excluded = ["size", "shadowColor", "bg", "style"];
+function usePopper(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      _props$enabled = _props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled,
+      modifiers = _props.modifiers,
+      _props$placement = _props.placement,
+      placementProp = _props$placement === void 0 ? "bottom" : _props$placement,
+      _props$strategy = _props.strategy,
+      strategy = _props$strategy === void 0 ? "absolute" : _props$strategy,
+      _props$arrowPadding = _props.arrowPadding,
+      arrowPadding = _props$arrowPadding === void 0 ? 8 : _props$arrowPadding,
+      _props$eventListeners = _props.eventListeners,
+      eventListeners = _props$eventListeners === void 0 ? true : _props$eventListeners,
+      offset = _props.offset,
+      _props$gutter = _props.gutter,
+      gutter = _props$gutter === void 0 ? 8 : _props$gutter,
+      _props$flip = _props.flip,
+      flip = _props$flip === void 0 ? true : _props$flip,
+      _props$boundary = _props.boundary,
+      boundary = _props$boundary === void 0 ? "clippingParents" : _props$boundary,
+      _props$preventOverflo = _props.preventOverflow,
+      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
+      matchWidth$1 = _props.matchWidth,
+      _props$direction = _props.direction,
+      direction = _props$direction === void 0 ? "ltr" : _props$direction;
+  var reference = react.useRef(null);
+  var popper = react.useRef(null);
+  var instance = react.useRef(null);
+  var placement = getPopperPlacement(placementProp, direction);
+  var cleanup = react.useRef(function () {});
+  var setupPopper = react.useCallback(function () {
     if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
 
-    cleanup.current?.();
+    cleanup.current == null ? void 0 : cleanup.current();
     instance.current = core.createPopper(reference.current, popper.current, {
-      placement,
-      modifiers: [innerArrow, positionArrow, transformOrigin, { ...matchWidth,
+      placement: placement,
+      modifiers: [innerArrow, positionArrow, transformOrigin, _extends({}, matchWidth, {
         enabled: !!matchWidth$1
-      }, {
-        name: "eventListeners",
-        ...getEventListenerOptions(eventListeners)
-      }, {
+      }), _extends({
+        name: "eventListeners"
+      }, getEventListenerOptions(eventListeners)), {
         name: "arrow",
@@ -319,3 +368,3 @@ options: {
         options: {
-          offset: offset ?? [0, gutter]
+          offset: offset != null ? offset : [0, gutter]
         }
@@ -332,7 +381,6 @@ }, {
         options: {
-          boundary
+          boundary: boundary
         }
-      }, // allow users override internal modifiers
-      ...(modifiers ?? [])],
-      strategy
+      }].concat(modifiers != null ? modifiers : []),
+      strategy: strategy
     }); // force update one-time to fix any positioning issues
@@ -343,4 +391,4 @@
   }, [placement, enabled, modifiers, matchWidth$1, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
-  react.useEffect(() => {
-    return () => {
+  react.useEffect(function () {
+    return function () {
       /**
@@ -351,3 +399,5 @@ * Fast refresh might call this function and tear down the popper
       if (!reference.current && !popper.current) {
-        instance.current?.destroy();
+        var _instance$current;
+
+        (_instance$current = instance.current) == null ? void 0 : _instance$current.destroy();
         instance.current = null;
@@ -357,55 +407,95 @@ }
   }, []);
-  const referenceRef = react.useCallback(node => {
+  var referenceRef = react.useCallback(function (node) {
     reference.current = node;
     setupPopper();
   }, [setupPopper]);
-  const getReferenceProps = react.useCallback((props = {}, ref = null) => ({ ...props,
-    ref: reactUtils.mergeRefs(referenceRef, ref)
-  }), [referenceRef]);
-  const popperRef = react.useCallback(node => {
+  var getReferenceProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: reactUtils.mergeRefs(referenceRef, ref)
+    });
+  }, [referenceRef]);
+  var popperRef = react.useCallback(function (node) {
     popper.current = node;
     setupPopper();
   }, [setupPopper]);
-  const getPopperProps = react.useCallback((props = {}, ref = null) => ({ ...props,
-    ref: reactUtils.mergeRefs(popperRef, ref),
-    style: { ...props.style,
-      position: strategy,
-      minWidth: "max-content",
-      inset: "0 auto auto 0"
+  var getPopperProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
     }
-  }), [strategy, popperRef]);
-  const getArrowProps = react.useCallback((props = {}, ref = null) => {
-    const {
-      size,
-      shadowColor,
-      bg,
-      style,
-      ...rest
-    } = props;
-    return { ...rest,
-      ref,
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: reactUtils.mergeRefs(popperRef, ref),
+      style: _extends({}, props.style, {
+        position: strategy,
+        minWidth: "max-content",
+        inset: "0 auto auto 0"
+      })
+    });
+  }, [strategy, popperRef]);
+  var getArrowProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    var _props2 = props;
+        _props2.size;
+        _props2.shadowColor;
+        _props2.bg;
+        _props2.style;
+        var rest = _objectWithoutPropertiesLoose(_props2, _excluded);
+
+    return _extends({}, rest, {
+      ref: ref,
       "data-popper-arrow": "",
       style: getArrowStyle(props)
-    };
+    });
   }, []);
-  const getArrowInnerProps = react.useCallback((props = {}, ref = null) => ({ ...props,
-    ref,
-    "data-popper-arrow-inner": ""
-  }), []);
+  var getArrowInnerProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: ref,
+      "data-popper-arrow-inner": ""
+    });
+  }, []);
   return {
-    update() {
-      instance.current?.update();
+    update: function update() {
+      var _instance$current2;
+
+      (_instance$current2 = instance.current) == null ? void 0 : _instance$current2.update();
     },
+    forceUpdate: function forceUpdate() {
+      var _instance$current3;
 
-    forceUpdate() {
-      instance.current?.forceUpdate();
+      (_instance$current3 = instance.current) == null ? void 0 : _instance$current3.forceUpdate();
     },
-
     transformOrigin: cssVars.transformOrigin.varRef,
-    referenceRef,
-    popperRef,
-    getPopperProps,
-    getArrowProps,
-    getArrowInnerProps,
-    getReferenceProps
+    referenceRef: referenceRef,
+    popperRef: popperRef,
+    getPopperProps: getPopperProps,
+    getArrowProps: getArrowProps,
+    getArrowInnerProps: getArrowInnerProps,
+    getReferenceProps: getReferenceProps
   };
@@ -415,11 +505,10 @@ }
 function getArrowStyle(props) {
-  const {
-    size,
-    shadowColor,
-    bg,
-    style
-  } = props;
-  const computedStyle = { ...style,
+  var size = props.size,
+      shadowColor = props.shadowColor,
+      bg = props.bg,
+      style = props.style;
+
+  var computedStyle = _extends({}, style, {
     position: "absolute"
-  };
+  });
 
@@ -426,0 +515,0 @@ if (size) {

dist/chakra-ui-popper.cjs.prod.js

@@ -9,8 +9,43 @@ 'use strict';
 
-const toVar = (value, fallback) => ({
-  var: value,
-  varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`
-});
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-const cssVars = {
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+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);
+}
+
+var toVar = function toVar(value, fallback) {
+  return {
+    "var": value,
+    varRef: fallback ? "var(" + value + ", " + fallback + ")" : "var(" + value + ")"
+  };
+};
+
+var cssVars = {
   arrowShadowColor: toVar("--popper-arrow-shadow-color"),
@@ -24,8 +59,8 @@ arrowSize: toVar("--popper-arrow-size", "8px"),
 function getBoxShadow(placement) {
-  if (placement.includes("top")) return `1px 1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("bottom")) return `-1px -1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("right")) return `-1px 1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("left")) return `1px -1px 1px 0 var(--popper-arrow-shadow-color)`;
+  if (placement.includes("top")) return "1px 1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("bottom")) return "-1px -1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("right")) return "-1px 1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("left")) return "1px -1px 1px 0 var(--popper-arrow-shadow-color)";
 }
-const transforms = {
+var transforms = {
   top: "bottom center",
@@ -44,4 +79,6 @@ "top-start": "bottom left",
 };
-const toTransformOrigin = placement => transforms[placement];
-const defaultEventListeners = {
+var toTransformOrigin = function toTransformOrigin(placement) {
+  return transforms[placement];
+};
+var defaultEventListeners = {
   scroll: true,
@@ -51,3 +88,3 @@ resize: true
 function getEventListenerOptions(value) {
-  let eventListeners;
+  var eventListeners;
 
@@ -57,5 +94,3 @@ if (typeof value === "object") {
       enabled: true,
-      options: { ...defaultEventListeners,
-        ...value
-      }
+      options: _extends({}, defaultEventListeners, value)
     };
@@ -77,3 +112,3 @@ } else {
 
-const matchWidth = {
+var matchWidth = {
   name: "matchWidth",
@@ -83,12 +118,12 @@ enabled: true,
   requires: ["computeStyles"],
-  fn: ({
-    state
-  }) => {
-    state.styles.popper.width = `${state.rects.reference.width}px`;
+  fn: function fn(_ref) {
+    var state = _ref.state;
+    state.styles.popper.width = state.rects.reference.width + "px";
   },
-  effect: ({
-    state
-  }) => () => {
-    const reference = state.elements.reference;
-    state.elements.popper.style.width = `${reference.offsetWidth}px`;
+  effect: function effect(_ref2) {
+    var state = _ref2.state;
+    return function () {
+      var reference = state.elements.reference;
+      state.elements.popper.style.width = reference.offsetWidth + "px";
+    };
   }
@@ -103,20 +138,20 @@ };
 
-const transformOrigin = {
+var transformOrigin = {
   name: "transformOrigin",
   enabled: true,
   phase: "write",
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref3) {
+    var state = _ref3.state;
     setTransformOrigin(state);
   },
-  effect: ({
-    state
-  }) => () => {
-    setTransformOrigin(state);
+  effect: function effect(_ref4) {
+    var state = _ref4.state;
+    return function () {
+      setTransformOrigin(state);
+    };
   }
 };
 
-const setTransformOrigin = state => {
-  state.elements.popper.style.setProperty(cssVars.transformOrigin.var, toTransformOrigin(state.placement));
+var setTransformOrigin = function setTransformOrigin(state) {
+  state.elements.popper.style.setProperty(cssVars.transformOrigin["var"], toTransformOrigin(state.placement));
 };
@@ -129,9 +164,8 @@ /* -------------------------------------------------------------------------------------------------
 
-const positionArrow = {
+var positionArrow = {
   name: "positionArrow",
   enabled: true,
   phase: "afterWrite",
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref5) {
+    var state = _ref5.state;
     setArrowStyles(state);
@@ -141,19 +175,15 @@ }
 
-const setArrowStyles = state => {
+var setArrowStyles = function setArrowStyles(state) {
+  var _state$elements;
+
   if (!state.placement) return;
-  const overrides = getArrowStyle$1(state.placement);
+  var overrides = getArrowStyle$1(state.placement);
 
-  if (state.elements?.arrow && overrides) {
-    Object.assign(state.elements.arrow.style, {
-      [overrides.property]: overrides.value,
-      width: cssVars.arrowSize.varRef,
-      height: cssVars.arrowSize.varRef,
-      zIndex: -1
-    });
-    const vars = {
-      [cssVars.arrowSizeHalf.var]: `calc(${cssVars.arrowSize.varRef} / 2)`,
-      [cssVars.arrowOffset.var]: `calc(${cssVars.arrowSizeHalf.varRef} * -1)`
-    };
+  if ((_state$elements = state.elements) != null && _state$elements.arrow && overrides) {
+    var _Object$assign, _vars;
 
-    for (const property in vars) {
+    Object.assign(state.elements.arrow.style, (_Object$assign = {}, _Object$assign[overrides.property] = overrides.value, _Object$assign.width = cssVars.arrowSize.varRef, _Object$assign.height = cssVars.arrowSize.varRef, _Object$assign.zIndex = -1, _Object$assign));
+    var vars = (_vars = {}, _vars[cssVars.arrowSizeHalf["var"]] = "calc(" + cssVars.arrowSize.varRef + " / 2)", _vars[cssVars.arrowOffset["var"]] = "calc(" + cssVars.arrowSizeHalf.varRef + " * -1)", _vars);
+
+    for (var property in vars) {
       state.elements.arrow.style.setProperty(property, vars[property]);
@@ -164,3 +194,3 @@ }
 
-const getArrowStyle$1 = placement => {
+var getArrowStyle$1 = function getArrowStyle(placement) {
   if (placement.startsWith("top")) {
@@ -200,3 +230,3 @@ return {
 
-const innerArrow = {
+var innerArrow = {
   name: "innerArrow",
@@ -206,17 +236,17 @@ enabled: true,
   requires: ["arrow"],
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref6) {
+    var state = _ref6.state;
     setInnerArrowStyles(state);
   },
-  effect: ({
-    state
-  }) => () => {
-    setInnerArrowStyles(state);
+  effect: function effect(_ref7) {
+    var state = _ref7.state;
+    return function () {
+      setInnerArrowStyles(state);
+    };
   }
 };
 
-const setInnerArrowStyles = state => {
+var setInnerArrowStyles = function setInnerArrowStyles(state) {
   if (!state.elements.arrow) return;
-  const inner = state.elements.arrow.querySelector("[data-popper-arrow-inner]");
+  var inner = state.elements.arrow.querySelector("[data-popper-arrow-inner]");
   if (!inner) return;
@@ -236,3 +266,3 @@ Object.assign(inner.style, {
 
-const logicals = {
+var logicals = {
   "start-start": {
@@ -263,3 +293,3 @@ ltr: "left-start",
 };
-const opposites = {
+var opposites = {
   "auto-start": "auto-end",
@@ -272,41 +302,60 @@ "auto-end": "auto-start",
 };
-function getPopperPlacement(placement, dir = "ltr") {
-  const value = logicals[placement]?.[dir] || placement;
+function getPopperPlacement(placement, dir) {
+  var _logicals$placement, _opposites$placement;
+
+  if (dir === void 0) {
+    dir = "ltr";
+  }
+
+  var value = ((_logicals$placement = logicals[placement]) == null ? void 0 : _logicals$placement[dir]) || placement;
   if (dir === "ltr") return value;
-  return opposites[placement] ?? value;
+  return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
 }
 
-function usePopper(props = {}) {
-  const {
-    enabled = true,
-    modifiers,
-    placement: placementProp = "bottom",
-    strategy = "absolute",
-    arrowPadding = 8,
-    eventListeners = true,
-    offset,
-    gutter = 8,
-    flip = true,
-    boundary = "clippingParents",
-    preventOverflow = true,
-    matchWidth: matchWidth$1,
-    direction = "ltr"
-  } = props;
-  const reference = react.useRef(null);
-  const popper = react.useRef(null);
-  const instance = react.useRef(null);
-  const placement = getPopperPlacement(placementProp, direction);
-  const cleanup = react.useRef(() => {});
-  const setupPopper = react.useCallback(() => {
+var _excluded = ["size", "shadowColor", "bg", "style"];
+function usePopper(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      _props$enabled = _props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled,
+      modifiers = _props.modifiers,
+      _props$placement = _props.placement,
+      placementProp = _props$placement === void 0 ? "bottom" : _props$placement,
+      _props$strategy = _props.strategy,
+      strategy = _props$strategy === void 0 ? "absolute" : _props$strategy,
+      _props$arrowPadding = _props.arrowPadding,
+      arrowPadding = _props$arrowPadding === void 0 ? 8 : _props$arrowPadding,
+      _props$eventListeners = _props.eventListeners,
+      eventListeners = _props$eventListeners === void 0 ? true : _props$eventListeners,
+      offset = _props.offset,
+      _props$gutter = _props.gutter,
+      gutter = _props$gutter === void 0 ? 8 : _props$gutter,
+      _props$flip = _props.flip,
+      flip = _props$flip === void 0 ? true : _props$flip,
+      _props$boundary = _props.boundary,
+      boundary = _props$boundary === void 0 ? "clippingParents" : _props$boundary,
+      _props$preventOverflo = _props.preventOverflow,
+      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
+      matchWidth$1 = _props.matchWidth,
+      _props$direction = _props.direction,
+      direction = _props$direction === void 0 ? "ltr" : _props$direction;
+  var reference = react.useRef(null);
+  var popper = react.useRef(null);
+  var instance = react.useRef(null);
+  var placement = getPopperPlacement(placementProp, direction);
+  var cleanup = react.useRef(function () {});
+  var setupPopper = react.useCallback(function () {
     if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
 
-    cleanup.current?.();
+    cleanup.current == null ? void 0 : cleanup.current();
     instance.current = core.createPopper(reference.current, popper.current, {
-      placement,
-      modifiers: [innerArrow, positionArrow, transformOrigin, { ...matchWidth,
+      placement: placement,
+      modifiers: [innerArrow, positionArrow, transformOrigin, _extends({}, matchWidth, {
         enabled: !!matchWidth$1
-      }, {
-        name: "eventListeners",
-        ...getEventListenerOptions(eventListeners)
-      }, {
+      }), _extends({
+        name: "eventListeners"
+      }, getEventListenerOptions(eventListeners)), {
         name: "arrow",
@@ -319,3 +368,3 @@ options: {
         options: {
-          offset: offset ?? [0, gutter]
+          offset: offset != null ? offset : [0, gutter]
         }
@@ -332,7 +381,6 @@ }, {
         options: {
-          boundary
+          boundary: boundary
         }
-      }, // allow users override internal modifiers
-      ...(modifiers ?? [])],
-      strategy
+      }].concat(modifiers != null ? modifiers : []),
+      strategy: strategy
     }); // force update one-time to fix any positioning issues
@@ -343,4 +391,4 @@
   }, [placement, enabled, modifiers, matchWidth$1, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
-  react.useEffect(() => {
-    return () => {
+  react.useEffect(function () {
+    return function () {
       /**
@@ -351,3 +399,5 @@ * Fast refresh might call this function and tear down the popper
       if (!reference.current && !popper.current) {
-        instance.current?.destroy();
+        var _instance$current;
+
+        (_instance$current = instance.current) == null ? void 0 : _instance$current.destroy();
         instance.current = null;
@@ -357,55 +407,95 @@ }
   }, []);
-  const referenceRef = react.useCallback(node => {
+  var referenceRef = react.useCallback(function (node) {
     reference.current = node;
     setupPopper();
   }, [setupPopper]);
-  const getReferenceProps = react.useCallback((props = {}, ref = null) => ({ ...props,
-    ref: reactUtils.mergeRefs(referenceRef, ref)
-  }), [referenceRef]);
-  const popperRef = react.useCallback(node => {
+  var getReferenceProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: reactUtils.mergeRefs(referenceRef, ref)
+    });
+  }, [referenceRef]);
+  var popperRef = react.useCallback(function (node) {
     popper.current = node;
     setupPopper();
   }, [setupPopper]);
-  const getPopperProps = react.useCallback((props = {}, ref = null) => ({ ...props,
-    ref: reactUtils.mergeRefs(popperRef, ref),
-    style: { ...props.style,
-      position: strategy,
-      minWidth: "max-content",
-      inset: "0 auto auto 0"
+  var getPopperProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
     }
-  }), [strategy, popperRef]);
-  const getArrowProps = react.useCallback((props = {}, ref = null) => {
-    const {
-      size,
-      shadowColor,
-      bg,
-      style,
-      ...rest
-    } = props;
-    return { ...rest,
-      ref,
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: reactUtils.mergeRefs(popperRef, ref),
+      style: _extends({}, props.style, {
+        position: strategy,
+        minWidth: "max-content",
+        inset: "0 auto auto 0"
+      })
+    });
+  }, [strategy, popperRef]);
+  var getArrowProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    var _props2 = props;
+        _props2.size;
+        _props2.shadowColor;
+        _props2.bg;
+        _props2.style;
+        var rest = _objectWithoutPropertiesLoose(_props2, _excluded);
+
+    return _extends({}, rest, {
+      ref: ref,
       "data-popper-arrow": "",
       style: getArrowStyle(props)
-    };
+    });
   }, []);
-  const getArrowInnerProps = react.useCallback((props = {}, ref = null) => ({ ...props,
-    ref,
-    "data-popper-arrow-inner": ""
-  }), []);
+  var getArrowInnerProps = react.useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: ref,
+      "data-popper-arrow-inner": ""
+    });
+  }, []);
   return {
-    update() {
-      instance.current?.update();
+    update: function update() {
+      var _instance$current2;
+
+      (_instance$current2 = instance.current) == null ? void 0 : _instance$current2.update();
     },
+    forceUpdate: function forceUpdate() {
+      var _instance$current3;
 
-    forceUpdate() {
-      instance.current?.forceUpdate();
+      (_instance$current3 = instance.current) == null ? void 0 : _instance$current3.forceUpdate();
     },
-
     transformOrigin: cssVars.transformOrigin.varRef,
-    referenceRef,
-    popperRef,
-    getPopperProps,
-    getArrowProps,
-    getArrowInnerProps,
-    getReferenceProps
+    referenceRef: referenceRef,
+    popperRef: popperRef,
+    getPopperProps: getPopperProps,
+    getArrowProps: getArrowProps,
+    getArrowInnerProps: getArrowInnerProps,
+    getReferenceProps: getReferenceProps
   };
@@ -415,11 +505,10 @@ }
 function getArrowStyle(props) {
-  const {
-    size,
-    shadowColor,
-    bg,
-    style
-  } = props;
-  const computedStyle = { ...style,
+  var size = props.size,
+      shadowColor = props.shadowColor,
+      bg = props.bg,
+      style = props.style;
+
+  var computedStyle = _extends({}, style, {
     position: "absolute"
-  };
+  });
 
@@ -426,0 +515,0 @@ if (size) {

dist/chakra-ui-popper.esm.js

@@ -5,8 +5,43 @@ import { mergeRefs } from '@chakra-ui/react-utils';
 
-const toVar = (value, fallback) => ({
-  var: value,
-  varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`
-});
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-const cssVars = {
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+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);
+}
+
+var toVar = function toVar(value, fallback) {
+  return {
+    "var": value,
+    varRef: fallback ? "var(" + value + ", " + fallback + ")" : "var(" + value + ")"
+  };
+};
+
+var cssVars = {
   arrowShadowColor: toVar("--popper-arrow-shadow-color"),
@@ -20,8 +55,8 @@ arrowSize: toVar("--popper-arrow-size", "8px"),
 function getBoxShadow(placement) {
-  if (placement.includes("top")) return `1px 1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("bottom")) return `-1px -1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("right")) return `-1px 1px 1px 0 var(--popper-arrow-shadow-color)`;
-  if (placement.includes("left")) return `1px -1px 1px 0 var(--popper-arrow-shadow-color)`;
+  if (placement.includes("top")) return "1px 1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("bottom")) return "-1px -1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("right")) return "-1px 1px 1px 0 var(--popper-arrow-shadow-color)";
+  if (placement.includes("left")) return "1px -1px 1px 0 var(--popper-arrow-shadow-color)";
 }
-const transforms = {
+var transforms = {
   top: "bottom center",
@@ -40,4 +75,6 @@ "top-start": "bottom left",
 };
-const toTransformOrigin = placement => transforms[placement];
-const defaultEventListeners = {
+var toTransformOrigin = function toTransformOrigin(placement) {
+  return transforms[placement];
+};
+var defaultEventListeners = {
   scroll: true,
@@ -47,3 +84,3 @@ resize: true
 function getEventListenerOptions(value) {
-  let eventListeners;
+  var eventListeners;
 
@@ -53,5 +90,3 @@ if (typeof value === "object") {
       enabled: true,
-      options: { ...defaultEventListeners,
-        ...value
-      }
+      options: _extends({}, defaultEventListeners, value)
     };
@@ -73,3 +108,3 @@ } else {
 
-const matchWidth = {
+var matchWidth = {
   name: "matchWidth",
@@ -79,12 +114,12 @@ enabled: true,
   requires: ["computeStyles"],
-  fn: ({
-    state
-  }) => {
-    state.styles.popper.width = `${state.rects.reference.width}px`;
+  fn: function fn(_ref) {
+    var state = _ref.state;
+    state.styles.popper.width = state.rects.reference.width + "px";
   },
-  effect: ({
-    state
-  }) => () => {
-    const reference = state.elements.reference;
-    state.elements.popper.style.width = `${reference.offsetWidth}px`;
+  effect: function effect(_ref2) {
+    var state = _ref2.state;
+    return function () {
+      var reference = state.elements.reference;
+      state.elements.popper.style.width = reference.offsetWidth + "px";
+    };
   }
@@ -99,20 +134,20 @@ };
 
-const transformOrigin = {
+var transformOrigin = {
   name: "transformOrigin",
   enabled: true,
   phase: "write",
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref3) {
+    var state = _ref3.state;
     setTransformOrigin(state);
   },
-  effect: ({
-    state
-  }) => () => {
-    setTransformOrigin(state);
+  effect: function effect(_ref4) {
+    var state = _ref4.state;
+    return function () {
+      setTransformOrigin(state);
+    };
   }
 };
 
-const setTransformOrigin = state => {
-  state.elements.popper.style.setProperty(cssVars.transformOrigin.var, toTransformOrigin(state.placement));
+var setTransformOrigin = function setTransformOrigin(state) {
+  state.elements.popper.style.setProperty(cssVars.transformOrigin["var"], toTransformOrigin(state.placement));
 };
@@ -125,9 +160,8 @@ /* -------------------------------------------------------------------------------------------------
 
-const positionArrow = {
+var positionArrow = {
   name: "positionArrow",
   enabled: true,
   phase: "afterWrite",
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref5) {
+    var state = _ref5.state;
     setArrowStyles(state);
@@ -137,19 +171,15 @@ }
 
-const setArrowStyles = state => {
+var setArrowStyles = function setArrowStyles(state) {
+  var _state$elements;
+
   if (!state.placement) return;
-  const overrides = getArrowStyle$1(state.placement);
+  var overrides = getArrowStyle$1(state.placement);
 
-  if (state.elements?.arrow && overrides) {
-    Object.assign(state.elements.arrow.style, {
-      [overrides.property]: overrides.value,
-      width: cssVars.arrowSize.varRef,
-      height: cssVars.arrowSize.varRef,
-      zIndex: -1
-    });
-    const vars = {
-      [cssVars.arrowSizeHalf.var]: `calc(${cssVars.arrowSize.varRef} / 2)`,
-      [cssVars.arrowOffset.var]: `calc(${cssVars.arrowSizeHalf.varRef} * -1)`
-    };
+  if ((_state$elements = state.elements) != null && _state$elements.arrow && overrides) {
+    var _Object$assign, _vars;
 
-    for (const property in vars) {
+    Object.assign(state.elements.arrow.style, (_Object$assign = {}, _Object$assign[overrides.property] = overrides.value, _Object$assign.width = cssVars.arrowSize.varRef, _Object$assign.height = cssVars.arrowSize.varRef, _Object$assign.zIndex = -1, _Object$assign));
+    var vars = (_vars = {}, _vars[cssVars.arrowSizeHalf["var"]] = "calc(" + cssVars.arrowSize.varRef + " / 2)", _vars[cssVars.arrowOffset["var"]] = "calc(" + cssVars.arrowSizeHalf.varRef + " * -1)", _vars);
+
+    for (var property in vars) {
       state.elements.arrow.style.setProperty(property, vars[property]);
@@ -160,3 +190,3 @@ }
 
-const getArrowStyle$1 = placement => {
+var getArrowStyle$1 = function getArrowStyle(placement) {
   if (placement.startsWith("top")) {
@@ -196,3 +226,3 @@ return {
 
-const innerArrow = {
+var innerArrow = {
   name: "innerArrow",
@@ -202,17 +232,17 @@ enabled: true,
   requires: ["arrow"],
-  fn: ({
-    state
-  }) => {
+  fn: function fn(_ref6) {
+    var state = _ref6.state;
     setInnerArrowStyles(state);
   },
-  effect: ({
-    state
-  }) => () => {
-    setInnerArrowStyles(state);
+  effect: function effect(_ref7) {
+    var state = _ref7.state;
+    return function () {
+      setInnerArrowStyles(state);
+    };
   }
 };
 
-const setInnerArrowStyles = state => {
+var setInnerArrowStyles = function setInnerArrowStyles(state) {
   if (!state.elements.arrow) return;
-  const inner = state.elements.arrow.querySelector("[data-popper-arrow-inner]");
+  var inner = state.elements.arrow.querySelector("[data-popper-arrow-inner]");
   if (!inner) return;
@@ -232,3 +262,3 @@ Object.assign(inner.style, {
 
-const logicals = {
+var logicals = {
   "start-start": {
@@ -259,3 +289,3 @@ ltr: "left-start",
 };
-const opposites = {
+var opposites = {
   "auto-start": "auto-end",
@@ -268,41 +298,60 @@ "auto-end": "auto-start",
 };
-function getPopperPlacement(placement, dir = "ltr") {
-  const value = logicals[placement]?.[dir] || placement;
+function getPopperPlacement(placement, dir) {
+  var _logicals$placement, _opposites$placement;
+
+  if (dir === void 0) {
+    dir = "ltr";
+  }
+
+  var value = ((_logicals$placement = logicals[placement]) == null ? void 0 : _logicals$placement[dir]) || placement;
   if (dir === "ltr") return value;
-  return opposites[placement] ?? value;
+  return (_opposites$placement = opposites[placement]) != null ? _opposites$placement : value;
 }
 
-function usePopper(props = {}) {
-  const {
-    enabled = true,
-    modifiers,
-    placement: placementProp = "bottom",
-    strategy = "absolute",
-    arrowPadding = 8,
-    eventListeners = true,
-    offset,
-    gutter = 8,
-    flip = true,
-    boundary = "clippingParents",
-    preventOverflow = true,
-    matchWidth: matchWidth$1,
-    direction = "ltr"
-  } = props;
-  const reference = useRef(null);
-  const popper = useRef(null);
-  const instance = useRef(null);
-  const placement = getPopperPlacement(placementProp, direction);
-  const cleanup = useRef(() => {});
-  const setupPopper = useCallback(() => {
+var _excluded = ["size", "shadowColor", "bg", "style"];
+function usePopper(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      _props$enabled = _props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled,
+      modifiers = _props.modifiers,
+      _props$placement = _props.placement,
+      placementProp = _props$placement === void 0 ? "bottom" : _props$placement,
+      _props$strategy = _props.strategy,
+      strategy = _props$strategy === void 0 ? "absolute" : _props$strategy,
+      _props$arrowPadding = _props.arrowPadding,
+      arrowPadding = _props$arrowPadding === void 0 ? 8 : _props$arrowPadding,
+      _props$eventListeners = _props.eventListeners,
+      eventListeners = _props$eventListeners === void 0 ? true : _props$eventListeners,
+      offset = _props.offset,
+      _props$gutter = _props.gutter,
+      gutter = _props$gutter === void 0 ? 8 : _props$gutter,
+      _props$flip = _props.flip,
+      flip = _props$flip === void 0 ? true : _props$flip,
+      _props$boundary = _props.boundary,
+      boundary = _props$boundary === void 0 ? "clippingParents" : _props$boundary,
+      _props$preventOverflo = _props.preventOverflow,
+      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
+      matchWidth$1 = _props.matchWidth,
+      _props$direction = _props.direction,
+      direction = _props$direction === void 0 ? "ltr" : _props$direction;
+  var reference = useRef(null);
+  var popper = useRef(null);
+  var instance = useRef(null);
+  var placement = getPopperPlacement(placementProp, direction);
+  var cleanup = useRef(function () {});
+  var setupPopper = useCallback(function () {
     if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
 
-    cleanup.current?.();
+    cleanup.current == null ? void 0 : cleanup.current();
     instance.current = createPopper(reference.current, popper.current, {
-      placement,
-      modifiers: [innerArrow, positionArrow, transformOrigin, { ...matchWidth,
+      placement: placement,
+      modifiers: [innerArrow, positionArrow, transformOrigin, _extends({}, matchWidth, {
         enabled: !!matchWidth$1
-      }, {
-        name: "eventListeners",
-        ...getEventListenerOptions(eventListeners)
-      }, {
+      }), _extends({
+        name: "eventListeners"
+      }, getEventListenerOptions(eventListeners)), {
         name: "arrow",
@@ -315,3 +364,3 @@ options: {
         options: {
-          offset: offset ?? [0, gutter]
+          offset: offset != null ? offset : [0, gutter]
         }
@@ -328,7 +377,6 @@ }, {
         options: {
-          boundary
+          boundary: boundary
         }
-      }, // allow users override internal modifiers
-      ...(modifiers ?? [])],
-      strategy
+      }].concat(modifiers != null ? modifiers : []),
+      strategy: strategy
     }); // force update one-time to fix any positioning issues
@@ -339,4 +387,4 @@
   }, [placement, enabled, modifiers, matchWidth$1, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
-  useEffect(() => {
-    return () => {
+  useEffect(function () {
+    return function () {
       /**
@@ -347,3 +395,5 @@ * Fast refresh might call this function and tear down the popper
       if (!reference.current && !popper.current) {
-        instance.current?.destroy();
+        var _instance$current;
+
+        (_instance$current = instance.current) == null ? void 0 : _instance$current.destroy();
         instance.current = null;
@@ -353,55 +403,95 @@ }
   }, []);
-  const referenceRef = useCallback(node => {
+  var referenceRef = useCallback(function (node) {
     reference.current = node;
     setupPopper();
   }, [setupPopper]);
-  const getReferenceProps = useCallback((props = {}, ref = null) => ({ ...props,
-    ref: mergeRefs(referenceRef, ref)
-  }), [referenceRef]);
-  const popperRef = useCallback(node => {
+  var getReferenceProps = useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: mergeRefs(referenceRef, ref)
+    });
+  }, [referenceRef]);
+  var popperRef = useCallback(function (node) {
     popper.current = node;
     setupPopper();
   }, [setupPopper]);
-  const getPopperProps = useCallback((props = {}, ref = null) => ({ ...props,
-    ref: mergeRefs(popperRef, ref),
-    style: { ...props.style,
-      position: strategy,
-      minWidth: "max-content",
-      inset: "0 auto auto 0"
+  var getPopperProps = useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
     }
-  }), [strategy, popperRef]);
-  const getArrowProps = useCallback((props = {}, ref = null) => {
-    const {
-      size,
-      shadowColor,
-      bg,
-      style,
-      ...rest
-    } = props;
-    return { ...rest,
-      ref,
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: mergeRefs(popperRef, ref),
+      style: _extends({}, props.style, {
+        position: strategy,
+        minWidth: "max-content",
+        inset: "0 auto auto 0"
+      })
+    });
+  }, [strategy, popperRef]);
+  var getArrowProps = useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    var _props2 = props;
+        _props2.size;
+        _props2.shadowColor;
+        _props2.bg;
+        _props2.style;
+        var rest = _objectWithoutPropertiesLoose(_props2, _excluded);
+
+    return _extends({}, rest, {
+      ref: ref,
       "data-popper-arrow": "",
       style: getArrowStyle(props)
-    };
+    });
   }, []);
-  const getArrowInnerProps = useCallback((props = {}, ref = null) => ({ ...props,
-    ref,
-    "data-popper-arrow-inner": ""
-  }), []);
+  var getArrowInnerProps = useCallback(function (props, ref) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    if (ref === void 0) {
+      ref = null;
+    }
+
+    return _extends({}, props, {
+      ref: ref,
+      "data-popper-arrow-inner": ""
+    });
+  }, []);
   return {
-    update() {
-      instance.current?.update();
+    update: function update() {
+      var _instance$current2;
+
+      (_instance$current2 = instance.current) == null ? void 0 : _instance$current2.update();
     },
+    forceUpdate: function forceUpdate() {
+      var _instance$current3;
 
-    forceUpdate() {
-      instance.current?.forceUpdate();
+      (_instance$current3 = instance.current) == null ? void 0 : _instance$current3.forceUpdate();
     },
-
     transformOrigin: cssVars.transformOrigin.varRef,
-    referenceRef,
-    popperRef,
-    getPopperProps,
-    getArrowProps,
-    getArrowInnerProps,
-    getReferenceProps
+    referenceRef: referenceRef,
+    popperRef: popperRef,
+    getPopperProps: getPopperProps,
+    getArrowProps: getArrowProps,
+    getArrowInnerProps: getArrowInnerProps,
+    getReferenceProps: getReferenceProps
   };
@@ -411,11 +501,10 @@ }
 function getArrowStyle(props) {
-  const {
-    size,
-    shadowColor,
-    bg,
-    style
-  } = props;
-  const computedStyle = { ...style,
+  var size = props.size,
+      shadowColor = props.shadowColor,
+      bg = props.bg,
+      style = props.style;
+
+  var computedStyle = _extends({}, style, {
     position: "absolute"
-  };
+  });
 
@@ -422,0 +511,0 @@ if (size) {

dist/declarations/src/index.d.ts

 export type { Placement, PlacementWithLogical } from "./popper.placement";
 export * from "./use-popper";
 export { cssVars as popperCSSVars } from "./utils";
+//# sourceMappingURL=index.d.ts.map

dist/declarations/src/modifiers.d.ts

@@ -6,1 +6,2 @@ import { Modifier } from "@popperjs/core";
 export declare const innerArrow: Modifier<"innerArrow", any>;
+//# sourceMappingURL=modifiers.d.ts.map

dist/declarations/src/popper.placement.d.ts

@@ -6,1 +6,2 @@ import type { Placement } from "@popperjs/core";
 export declare function getPopperPlacement(placement: PlacementWithLogical, dir?: "ltr" | "rtl"): Placement;
+//# sourceMappingURL=popper.placement.d.ts.map

dist/declarations/src/use-popper.d.ts

@@ -13,3 +13,3 @@ import { PropGetterV2 } from "@chakra-ui/react-utils";
      */
-    offset?: [crossAxis: number, mainAxis: number];
+    offset?: [number, number];
     /**
@@ -112,1 +112,2 @@ * The distance or margin between the reference and popper.
 export declare type UsePopperReturn = ReturnType<typeof usePopper>;
+//# sourceMappingURL=use-popper.d.ts.map

dist/declarations/src/utils.d.ts

@@ -42,1 +42,2 @@ import { Placement } from "@popperjs/core";
 export {};
+//# sourceMappingURL=utils.d.ts.map

package.json

 {
   "name": "@chakra-ui/popper",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A React component and hooks wrapper for popper.js",
@@ -25,3 +25,4 @@ "keywords": [
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -40,3 +41,3 @@ "publishConfig": {
   "dependencies": {
-    "@chakra-ui/react-utils": "1.2.0",
+    "@chakra-ui/react-utils": "1.2.1",
     "@popperjs/core": "^2.9.3"
@@ -43,0 +44,0 @@ },

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89182

increased by51.1%

Number of package files

23

increased by76.92%

Lines of code

2018

increased by52.53%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@chakra-ui/react-utils@1.2.1(transitive)

• - Removed@chakra-ui/react-utils@1.2.0(transitive)

• Updated@chakra-ui/react-utils@1.2.1