Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@chakra-ui/popper

Package Overview
Dependencies
Maintainers
4
Versions
160
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chakra-ui/popper - npm Package Compare versions

Comparing version 1.1.5 to 2.0.0

dist/cjs/modifiers.js
dist/cjs/modifiers.js.map
dist/cjs/utils.js
dist/cjs/utils.js.map
dist/esm/modifiers.js
dist/esm/modifiers.js.map
dist/esm/utils.js
dist/esm/utils.js.map
dist/types/modifiers.d.ts
dist/types/utils.d.ts

16

CHANGELOG.md
# Change Log
## 2.0.0
### Major Changes
- [`91ef14839`](https://github.com/chakra-ui/chakra-ui/commit/91ef148397187010804eb8f30307d2ec94c32c5b)
[#3583](https://github.com/chakra-ui/chakra-ui/pull/3583) Thanks
[@segunadebayo](https://github.com/segunadebayo)! - Refactor the positioning
logic to improve stability and leverage CSS custom properties
### Patch Changes
- Updated dependencies
[[`e748219f3`](https://github.com/chakra-ui/chakra-ui/commit/e748219f300f0c51b0eb304fce38b014d7bcbc86),
[`91ef14839`](https://github.com/chakra-ui/chakra-ui/commit/91ef148397187010804eb8f30307d2ec94c32c5b)]:
- @chakra-ui/utils@1.4.0
## 1.1.5

@@ -4,0 +20,0 @@

8

dist/cjs/index.js

@@ -5,5 +5,5 @@ "use strict";

var _exportNames = {
toTransformOrigin: true
popperCSSVars: true
};
exports.toTransformOrigin = void 0;
exports.popperCSSVars = void 0;

@@ -19,5 +19,5 @@ var _usePopper = require("./use-popper");

var _popper = require("./popper.utils");
var _utils = require("./utils");
exports.toTransformOrigin = _popper.toTransformOrigin;
exports.popperCSSVars = _utils.popperCSSVars;
//# sourceMappingURL=index.js.map

292

dist/cjs/use-popper.js

@@ -8,8 +8,10 @@ "use strict";

var React = _interopRequireWildcard(require("react"));
var _core = require("@popperjs/core");
var _popper = require("./popper.utils");
var _react = require("react");
var _reactPopper = require("./react-popper");
var popperModifiers = _interopRequireWildcard(require("./modifiers"));
var _utils2 = require("./utils");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

@@ -21,5 +23,15 @@

var defaultProps = {
placement: "bottom",
strategy: "absolute",
flip: true,
gutter: 8,
arrowPadding: 8,
preventOverflow: true,
eventListeners: true,
modifiers: [],
boundary: "clippingParents"
};
function usePopper(props) {
var _popperJS$state$place, _popperJS$state;
if (props === void 0) {

@@ -29,204 +41,82 @@ props = {};

var _props = props,
enabled = _props.enabled,
_props$placement = _props.placement,
placement = _props$placement === void 0 ? "bottom" : _props$placement,
_props$preventOverflo = _props.preventOverflow,
preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
_props$fixed = _props.fixed,
fixed = _props$fixed === void 0 ? false : _props$fixed,
_props$flip = _props.flip,
flip = _props$flip === void 0 ? true : _props$flip,
_props$arrowSize = _props.arrowSize,
arrowSize = _props$arrowSize === void 0 ? 8 : _props$arrowSize,
arrowShadowColor = _props.arrowShadowColor,
_props$gutter = _props.gutter,
gutter = _props$gutter === void 0 ? 8 : _props$gutter,
_props$arrowPadding = _props.arrowPadding,
arrowPadding = _props$arrowPadding === void 0 ? 4 : _props$arrowPadding,
offsetProp = _props.offset,
matchWidth = _props.matchWidth,
_props$modifiers = _props.modifiers,
modifiers = _props$modifiers === void 0 ? [] : _props$modifiers;
var opts = Object.assign({}, defaultProps, (0, _utils.filterUndefined)(props));
var _opts$modifiers = opts.modifiers,
modifiers = _opts$modifiers === void 0 ? [] : _opts$modifiers,
placementProp = opts.placement,
strategy = opts.strategy,
arrowPadding = opts.arrowPadding,
eventListeners = opts.eventListeners,
offset = opts.offset,
gutter = opts.gutter,
flip = opts.flip,
boundary = opts.boundary,
preventOverflow = opts.preventOverflow,
matchWidth = opts.matchWidth;
var reference = (0, _react.useRef)(null);
var popper = (0, _react.useRef)(null);
var instanceRef = (0, _react.useRef)(null);
var cleanup = (0, _react.useRef)(function () {});
var setupPopper = (0, _react.useCallback)(function () {
if (!reference.current || !popper.current) return;
cleanup.current == null ? void 0 : cleanup.current();
instanceRef.current = (0, _core.createPopper)(reference.current, popper.current, {
placement: placementProp,
modifiers: modifiers.concat([popperModifiers.innerArrow, popperModifiers.positionArrow, popperModifiers.transformOrigin, _extends({}, popperModifiers.matchWidth, {
enabled: !!matchWidth
}), _extends({
name: "eventListeners"
}, (0, _utils2.getEventListenerOptions)(eventListeners)), {
name: "arrow",
options: {
padding: arrowPadding
}
}, {
name: "offset",
options: {
offset: offset != null ? offset : [0, gutter]
}
}, {
name: "flip",
enabled: !!flip,
options: {
padding: 8
}
}, {
name: "preventOverflow",
enabled: !!preventOverflow,
options: {
boundary: boundary
}
}]),
strategy: strategy
}); // force update one-time to fix any positioning issues
var _React$useState = React.useState(null),
referenceNode = _React$useState[0],
setReferenceNode = _React$useState[1];
instanceRef.current.forceUpdate();
cleanup.current = instanceRef.current.destroy;
}, [placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
(0, _react.useEffect)(function () {
return function () {
var _instanceRef$current;
var _React$useState2 = React.useState(null),
popperNode = _React$useState2[0],
setPopperNode = _React$useState2[1];
(_instanceRef$current = instanceRef.current) == null ? void 0 : _instanceRef$current.destroy();
instanceRef.current = null;
};
}, []);
return (0, _react.useMemo)(function () {
var _instanceRef$current2, _instanceRef$current3;
var _React$useState3 = React.useState(null),
arrowNode = _React$useState3[0],
setArrowNode = _React$useState3[1];
/**
* recommended via popper docs
* @see https://popper.js.org/react-popper/v2/faq/#why-i-get-render-loop-whenever-i-put-a-function-inside-the-popper-configuration
*/
var customModifiers = React.useMemo(function () {
var offset = offsetProp != null ? offsetProp : [0, gutter];
return [// @see https://popper.js.org/docs/v2/modifiers/offset/
{
name: "offset",
options: {
offset: offset != null ? offset : [0, gutter]
return {
update: (_instanceRef$current2 = instanceRef.current) == null ? void 0 : _instanceRef$current2.update,
forceUpdate: (_instanceRef$current3 = instanceRef.current) == null ? void 0 : _instanceRef$current3.forceUpdate,
referenceRef: function referenceRef(node) {
reference.current = node;
setupPopper();
},
phase: "main"
}, // @see https://popper.js.org/docs/v2/modifiers/prevent-overflow/
{
name: "preventOverflow",
enabled: !!preventOverflow,
phase: "main"
}, // @see https://popper.js.org/docs/v2/modifiers/arrow/
{
name: "arrow",
enabled: !!arrowNode,
options: {
element: arrowNode,
padding: arrowPadding
},
phase: "main"
}, // @see https://popper.js.org/docs/v2/modifiers/flip/
{
name: "flip",
enabled: flip,
options: {
padding: 8
},
phase: "main"
}, {
name: "matchWidth",
enabled: !!matchWidth,
phase: "beforeWrite",
requires: ["computeStyles"],
fn: function fn(_ref2) {
var state = _ref2.state;
state.styles.popper.width = state.rects.reference.width + "px";
},
effect: function effect(_ref3) {
var state = _ref3.state;
return function () {
var reference = state.elements.reference;
state.elements.popper.style.width = reference.offsetWidth + "px";
};
popperRef: function popperRef(node) {
popper.current = node;
setupPopper();
}
}, {
name: "applyArrowHide",
enabled: true,
phase: "write",
fn: function fn(_ref4) {
var state = _ref4.state;
var arrow = state.elements.arrow;
if (arrow) {
var _state$modifiersData$;
if (((_state$modifiersData$ = state.modifiersData.arrow) == null ? void 0 : _state$modifiersData$.centerOffset) !== 0) {
arrow.setAttribute("data-hide", "");
} else {
arrow.removeAttribute("data-hide");
}
}
}
}];
}, [arrowNode, arrowPadding, flip, preventOverflow, offsetProp, gutter, matchWidth]);
var popperJS = (0, _reactPopper.usePopper)(referenceNode, popperNode, {
enabled: enabled,
placement: placement,
strategy: fixed ? "fixed" : "absolute",
modifiers: customModifiers.concat(modifiers)
});
/**
* Ensure the popper will be correctly positioned with an extra update
*/
React.useEffect(function () {
popperJS.forceUpdate == null ? void 0 : popperJS.forceUpdate();
});
var finalPlacement = (_popperJS$state$place = (_popperJS$state = popperJS.state) == null ? void 0 : _popperJS$state.placement) != null ? _popperJS$state$place : placement;
var arrowStyles = (0, _popper.getArrowStyles)({
placement: finalPlacement,
popperArrowStyles: popperJS.styles.arrow,
arrowSize: arrowSize
});
var getReferenceProps = React.useCallback(function (props, _ref) {
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, {
ref: (0, _utils.mergeRefs)(setReferenceNode, _ref)
});
}, []);
var getPopperProps = React.useCallback(function (props, _ref) {
var _popperJS$styles;
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, popperJS.attributes.popper, {
ref: (0, _utils.mergeRefs)(setPopperNode, _ref),
style: _extends({}, props.style, (_popperJS$styles = popperJS.styles) == null ? void 0 : _popperJS$styles.popper)
});
}, [popperJS.attributes, popperJS.styles]);
var getArrowWrapperProps = React.useCallback(function (props, _ref) {
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, popperJS.attributes.arrow, {
ref: (0, _utils.mergeRefs)(setArrowNode, _ref),
style: _extends({}, props.style, arrowStyles)
});
}, [popperJS.attributes, arrowStyles]);
var getArrowProps = React.useCallback(function (props, _ref) {
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, {
ref: _ref,
style: _extends({
boxShadow: (0, _popper.getBoxShadow)(finalPlacement, arrowShadowColor)
}, props.style, {
position: "absolute",
zIndex: -1,
width: "100%",
height: "100%",
transform: "rotate(45deg)"
})
});
}, [finalPlacement, arrowShadowColor]);
return {
transformOrigin: (0, _popper.toTransformOrigin)(finalPlacement),
getReferenceProps: getReferenceProps,
getPopperProps: getPopperProps,
getArrowWrapperProps: getArrowWrapperProps,
getArrowProps: getArrowProps,
state: popperJS.state,
forceUpdate: popperJS.forceUpdate,
update: popperJS.update,
placement: finalPlacement
};
};
}, [setupPopper]);
}
//# sourceMappingURL=use-popper.js.map

2

dist/esm/index.js
export * from "./use-popper";
export { toTransformOrigin } from "./popper.utils";
export { popperCSSVars } from "./utils";
//# sourceMappingURL=index.js.map

284

dist/esm/use-popper.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 { mergeRefs } from "@chakra-ui/utils";
import * as React from "react";
import { getArrowStyles, getBoxShadow, toTransformOrigin } from "./popper.utils";
import { usePopper as useBasePopper } from "./react-popper";
import { filterUndefined } from "@chakra-ui/utils";
import { createPopper } from "@popperjs/core";
import { useCallback, useEffect, useMemo, useRef } from "react";
import * as popperModifiers from "./modifiers";
import { getEventListenerOptions } from "./utils";
var defaultProps = {
placement: "bottom",
strategy: "absolute",
flip: true,
gutter: 8,
arrowPadding: 8,
preventOverflow: true,
eventListeners: true,
modifiers: [],
boundary: "clippingParents"
};
export function usePopper(props) {
var _popperJS$state$place, _popperJS$state;
if (props === void 0) {

@@ -14,197 +24,83 @@ props = {};

var opts = Object.assign({}, defaultProps, filterUndefined(props));
var {
enabled,
placement = "bottom",
preventOverflow = true,
fixed = false,
flip = true,
arrowSize = 8,
arrowShadowColor,
gutter = 8,
arrowPadding = 4,
offset: offsetProp,
matchWidth,
modifiers = []
} = props;
var [referenceNode, setReferenceNode] = React.useState(null);
var [popperNode, setPopperNode] = React.useState(null);
var [arrowNode, setArrowNode] = React.useState(null);
/**
* recommended via popper docs
* @see https://popper.js.org/react-popper/v2/faq/#why-i-get-render-loop-whenever-i-put-a-function-inside-the-popper-configuration
*/
var customModifiers = React.useMemo(() => {
var offset = offsetProp != null ? offsetProp : [0, gutter];
return [// @see https://popper.js.org/docs/v2/modifiers/offset/
{
name: "offset",
options: {
offset: offset != null ? offset : [0, gutter]
},
phase: "main"
}, // @see https://popper.js.org/docs/v2/modifiers/prevent-overflow/
{
name: "preventOverflow",
enabled: !!preventOverflow,
phase: "main"
}, // @see https://popper.js.org/docs/v2/modifiers/arrow/
{
name: "arrow",
enabled: !!arrowNode,
options: {
element: arrowNode,
padding: arrowPadding
},
phase: "main"
}, // @see https://popper.js.org/docs/v2/modifiers/flip/
{
name: "flip",
enabled: flip,
options: {
padding: 8
},
phase: "main"
}, {
name: "matchWidth",
enabled: !!matchWidth,
phase: "beforeWrite",
requires: ["computeStyles"],
fn: (_ref2) => {
var {
state
} = _ref2;
state.styles.popper.width = state.rects.reference.width + "px";
},
effect: (_ref3) => {
var {
state
} = _ref3;
return () => {
var reference = state.elements.reference;
state.elements.popper.style.width = reference.offsetWidth + "px";
};
}
}, {
name: "applyArrowHide",
enabled: true,
phase: "write",
fn(_ref4) {
var {
state
} = _ref4;
var {
arrow
} = state.elements;
if (arrow) {
var _state$modifiersData$;
if (((_state$modifiersData$ = state.modifiersData.arrow) == null ? void 0 : _state$modifiersData$.centerOffset) !== 0) {
arrow.setAttribute("data-hide", "");
} else {
arrow.removeAttribute("data-hide");
}
modifiers = [],
placement: placementProp,
strategy,
arrowPadding,
eventListeners,
offset,
gutter,
flip,
boundary,
preventOverflow,
matchWidth
} = opts;
var reference = useRef(null);
var popper = useRef(null);
var instanceRef = useRef(null);
var cleanup = useRef(() => {});
var setupPopper = useCallback(() => {
if (!reference.current || !popper.current) return;
cleanup.current == null ? void 0 : cleanup.current();
instanceRef.current = createPopper(reference.current, popper.current, {
placement: placementProp,
modifiers: modifiers.concat([popperModifiers.innerArrow, popperModifiers.positionArrow, popperModifiers.transformOrigin, _extends({}, popperModifiers.matchWidth, {
enabled: !!matchWidth
}), _extends({
name: "eventListeners"
}, getEventListenerOptions(eventListeners)), {
name: "arrow",
options: {
padding: arrowPadding
}
}
}, {
name: "offset",
options: {
offset: offset != null ? offset : [0, gutter]
}
}, {
name: "flip",
enabled: !!flip,
options: {
padding: 8
}
}, {
name: "preventOverflow",
enabled: !!preventOverflow,
options: {
boundary
}
}]),
strategy
}); // force update one-time to fix any positioning issues
}];
}, [arrowNode, arrowPadding, flip, preventOverflow, offsetProp, gutter, matchWidth]);
var popperJS = useBasePopper(referenceNode, popperNode, {
enabled,
placement,
strategy: fixed ? "fixed" : "absolute",
modifiers: customModifiers.concat(modifiers)
});
/**
* Ensure the popper will be correctly positioned with an extra update
*/
instanceRef.current.forceUpdate();
cleanup.current = instanceRef.current.destroy;
}, [placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
useEffect(() => {
return () => {
var _instanceRef$current;
React.useEffect(() => {
popperJS.forceUpdate == null ? void 0 : popperJS.forceUpdate();
});
var finalPlacement = (_popperJS$state$place = (_popperJS$state = popperJS.state) == null ? void 0 : _popperJS$state.placement) != null ? _popperJS$state$place : placement;
var arrowStyles = getArrowStyles({
placement: finalPlacement,
popperArrowStyles: popperJS.styles.arrow,
arrowSize
});
var getReferenceProps = React.useCallback(function (props, _ref) {
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, {
ref: mergeRefs(setReferenceNode, _ref)
});
(_instanceRef$current = instanceRef.current) == null ? void 0 : _instanceRef$current.destroy();
instanceRef.current = null;
};
}, []);
var getPopperProps = React.useCallback(function (props, _ref) {
var _popperJS$styles;
return useMemo(() => {
var _instanceRef$current2, _instanceRef$current3;
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, popperJS.attributes.popper, {
ref: mergeRefs(setPopperNode, _ref),
style: _extends({}, props.style, (_popperJS$styles = popperJS.styles) == null ? void 0 : _popperJS$styles.popper)
});
}, [popperJS.attributes, popperJS.styles]);
var getArrowWrapperProps = React.useCallback(function (props, _ref) {
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, popperJS.attributes.arrow, {
ref: mergeRefs(setArrowNode, _ref),
style: _extends({}, props.style, arrowStyles)
});
}, [popperJS.attributes, arrowStyles]);
var getArrowProps = React.useCallback(function (props, _ref) {
if (props === void 0) {
props = {};
}
if (_ref === void 0) {
_ref = null;
}
return _extends({}, props, {
ref: _ref,
style: _extends({
boxShadow: getBoxShadow(finalPlacement, arrowShadowColor)
}, props.style, {
position: "absolute",
zIndex: -1,
width: "100%",
height: "100%",
transform: "rotate(45deg)"
})
});
}, [finalPlacement, arrowShadowColor]);
return {
transformOrigin: toTransformOrigin(finalPlacement),
getReferenceProps,
getPopperProps,
getArrowWrapperProps,
getArrowProps,
state: popperJS.state,
forceUpdate: popperJS.forceUpdate,
update: popperJS.update,
placement: finalPlacement
};
return {
update: (_instanceRef$current2 = instanceRef.current) == null ? void 0 : _instanceRef$current2.update,
forceUpdate: (_instanceRef$current3 = instanceRef.current) == null ? void 0 : _instanceRef$current3.forceUpdate,
referenceRef: node => {
reference.current = node;
setupPopper();
},
popperRef: node => {
popper.current = node;
setupPopper();
}
};
}, [setupPopper]);
}
//# sourceMappingURL=use-popper.js.map

2

dist/types/index.d.ts
export * from "./use-popper";
export { toTransformOrigin } from "./popper.utils";
export { popperCSSVars } from "./utils";

38

dist/types/use-popper.d.ts

@@ -1,33 +0,25 @@

import { PropGetter } from "@chakra-ui/utils";
import { Modifier, Placement } from "@popperjs/core";
import { Modifier, Placement, VirtualElement } from "@popperjs/core";
export type { Placement };
export interface UsePopperProps {
enabled?: boolean;
offset?: [x: number, y: number];
gutter?: number;
placement?: Placement;
offset?: [number, number];
preventOverflow?: boolean;
fixed?: boolean;
flip?: boolean;
arrowSize?: number;
arrowShadowColor?: string;
/**
* The distance of the arrow to its next border (numeric)
* E.g. arrowPadding = borderRadius * 2
*/
matchWidth?: boolean;
boundary?: "clippingParents" | "scrollParent" | HTMLElement;
eventListeners?: boolean | {
scroll?: boolean;
resize?: boolean;
};
arrowPadding?: number;
matchWidth?: boolean;
modifiers?: Modifier<string, any>[];
strategy?: "absolute" | "fixed";
placement?: Placement;
modifiers?: Array<Partial<Modifier<string, any>>>;
}
export declare function usePopper(props?: UsePopperProps): {
transformOrigin: any;
getReferenceProps: PropGetter<any, {}>;
getPopperProps: PropGetter<any, {}>;
getArrowWrapperProps: PropGetter<any, {}>;
getArrowProps: PropGetter<any, {}>;
state: import("@popperjs/core").State | null;
forceUpdate: (() => void) | null;
update: (() => Promise<Partial<import("@popperjs/core").State>>) | null;
placement: Placement;
update: (() => Promise<Partial<import("@popperjs/core").State>>) | undefined;
forceUpdate: (() => void) | undefined;
referenceRef: <T extends Element | VirtualElement>(node: T | null) => void;
popperRef: <T_1 extends HTMLElement>(node: T_1 | null) => void;
};
export declare type UsePopperReturn = ReturnType<typeof usePopper>;

8

package.json
{
"name": "@chakra-ui/popper",
"version": "1.1.5",
"version": "2.0.0",
"description": "A React component and hooks wrapper for popper.js",

@@ -59,6 +59,4 @@ "keywords": [

"dependencies": {
"@chakra-ui/hooks": "1.1.5",
"@chakra-ui/utils": "1.3.0",
"@popperjs/core": "2.4.4",
"dequal": "2.0.2"
"@chakra-ui/utils": "1.4.0",
"@popperjs/core": "2.4.4"
},

@@ -65,0 +63,0 @@ "peerDependencies": {

dist/cjs/popper.utils.js
dist/cjs/popper.utils.js.map
dist/cjs/react-popper.js
dist/cjs/react-popper.js.map
dist/esm/popper.utils.js
dist/esm/popper.utils.js.map
dist/esm/react-popper.js
dist/esm/react-popper.js.map
dist/types/popper.utils.d.ts
dist/types/react-popper.d.ts
dist/cjs/index.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/use-popper.js.map

Sorry, the diff of this file is not supported yet

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/esm/use-popper.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc