Socket
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.0.0-rc.5 to 1.0.0-rc.6

8

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log

# 1.0.0-rc.6 (2020-10-25)
**Note:** Version bump only for package @chakra-ui/popper
# 1.0.0-rc.5 (2020-09-27)

@@ -8,0 +16,0 @@

13

dist/cjs/index.js

@@ -14,16 +14,9 @@ "use strict";

if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _usePopper[key]) return;
exports[key] = _usePopper[key];
});
var _popper = require("./popper.modifiers");
var _popper = require("./popper.utils");
Object.keys(_popper).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
exports[key] = _popper[key];
});
var _popper2 = require("./popper.utils");
exports.toTransformOrigin = _popper2.toTransformOrigin;
exports.toTransformOrigin = _popper.toTransformOrigin;
//# sourceMappingURL=index.js.map

58

dist/cjs/popper.utils.js
"use strict";
exports.__esModule = true;
exports.getArrowStyles = getArrowStyles;
exports.getBoxShadow = getBoxShadow;
exports.toTransformOrigin = exports.getOppositePosition = void 0;
var oppositeDirections = {
top: "bottom",
bottom: "top",
right: "left",
left: "right"
};
exports.getArrowStyles = exports.toTransformOrigin = void 0;
var getOppositePosition = function getOppositePosition(position) {
return oppositeDirections[position];
};
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); }
exports.getOppositePosition = getOppositePosition;
function getBoxShadow(placement, color) {
if (!color) return undefined;
var splitPlacement = function splitPlacement(placement) {
return placement.split("-");
};
function getArrowStyles(placement, arrowSize, arrowShadowColor) {
var _ref;
if (typeof placement !== "string") return {};
var _splitPlacement = splitPlacement(placement),
position = _splitPlacement[0];
var oppositePosition = getOppositePosition(position);
if (!oppositePosition) return {};
return _ref = {}, _ref[oppositePosition] = "-" + arrowSize / 2 + "px", _ref.width = arrowSize, _ref.height = arrowSize, _ref.position = "absolute", _ref.transform = "rotate(45deg)", _ref.boxShadow = arrowShadowColor ? getBoxShadow(placement, arrowShadowColor) : undefined, _ref;
}
function getBoxShadow(placement, color) {
if (placement.includes("top")) {

@@ -53,2 +27,4 @@ return "2px 2px 2px 0 " + color;

}
return undefined;
}

@@ -76,2 +52,24 @@

exports.toTransformOrigin = toTransformOrigin;
var getArrowStyles = function getArrowStyles(options) {
var arrowSize = options.arrowSize,
_options$popperArrowS = options.popperArrowStyles,
popperArrowStyles = _options$popperArrowS === void 0 ? {} : _options$popperArrowS,
placement = options.placement;
var styles = _extends({}, popperArrowStyles, {
width: arrowSize,
height: arrowSize,
zIndex: -1
});
var offsetAdjust = -(arrowSize / 2);
if (placement.startsWith("top")) styles.bottom = offsetAdjust;
if (placement.startsWith("bottom")) styles.top = offsetAdjust;
if (placement.startsWith("left")) styles.right = offsetAdjust;
if (placement.startsWith("right")) styles.left = offsetAdjust;
return styles;
};
exports.getArrowStyles = getArrowStyles;
//# sourceMappingURL=popper.utils.js.map

301

dist/cjs/use-popper.js

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

var _utils = require("@chakra-ui/utils");
var React = _interopRequireWildcard(require("react"));
var _core = require("@popperjs/core");
var _reactPopper = require("react-popper");

@@ -19,6 +21,5 @@ var _popper = require("./popper.utils");

var isBrowser = typeof window !== "undefined";
var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
function usePopper(props) {
var _popperJS$state$place, _popperJS$state;
function usePopper(props) {
if (props === void 0) {

@@ -30,4 +31,3 @@ props = {};

_props$placement = _props.placement,
initialPlacement = _props$placement === void 0 ? "bottom" : _props$placement,
offsetProp = _props.offset,
placement = _props$placement === void 0 ? "bottom" : _props$placement,
_props$preventOverflo = _props.preventOverflow,

@@ -37,147 +37,192 @@ preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,

fixed = _props$fixed === void 0 ? false : _props$fixed,
_props$forceUpdate = _props.forceUpdate,
forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
_props$flip = _props.flip,
flip = _props$flip === void 0 ? true : _props$flip,
_props$arrowSize = _props.arrowSize,
arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
arrowSize = _props$arrowSize === void 0 ? 8 : _props$arrowSize,
arrowShadowColor = _props.arrowShadowColor,
_props$gutter = _props.gutter,
gutter = _props$gutter === void 0 ? arrowSize : _props$gutter,
_props$eventsEnabled = _props.eventsEnabled,
eventsEnabled = _props$eventsEnabled === void 0 ? true : _props$eventsEnabled,
modifiers = _props.modifiers;
var popper = React.useRef(null);
var referenceRef = React.useRef(null);
var popoverRef = React.useRef(null);
var arrowRef = React.useRef(null);
gutter = _props$gutter === void 0 ? 8 : _props$gutter,
_props$arrowPadding = _props.arrowPadding,
arrowPadding = _props$arrowPadding === void 0 ? 4 : _props$arrowPadding,
offset = _props.offset,
matchWidth = _props.matchWidth,
_props$modifiers = _props.modifiers,
modifiers = _props$modifiers === void 0 ? [] : _props$modifiers;
var _React$useState = React.useState(initialPlacement),
originalPlacement = _React$useState[0],
place = _React$useState[1];
var _React$useState = React.useState(null),
referenceNode = _React$useState[0],
setReferenceNode = _React$useState[1];
var _React$useState2 = React.useState(initialPlacement),
placement = _React$useState2[0],
setPlacement = _React$useState2[1];
var _React$useState2 = React.useState(null),
popperNode = _React$useState2[0],
setPopperNode = _React$useState2[1];
var _React$useState3 = React.useState(offsetProp || [0, gutter]),
offset = _React$useState3[0];
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 _React$useState4 = React.useState({}),
popoverStyles = _React$useState4[0],
setPopoverStyles = _React$useState4[1];
var _React$useState5 = React.useState({}),
arrowStyles = _React$useState5[0],
setArrowStyles = _React$useState5[1];
var customMofidiers = React.useMemo(function () {
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: 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";
};
}
}, {
name: "applyArrowHide",
enabled: true,
phase: "write",
fn: function fn(_ref4) {
var state = _ref4.state;
var arrow = state.elements.arrow;
var update = React.useCallback(function () {
if (popper.current) {
popper.current.forceUpdate();
return true;
}
if (arrow) {
var _state$modifiersData$;
return false;
}, []);
var modifiersOverride = modifiers != null ? modifiers : [];
useSafeLayoutEffect(function () {
if (referenceRef.current && popoverRef.current) {
popper.current = (0, _core.createPopper)(referenceRef.current, popoverRef.current, {
placement: originalPlacement,
strategy: fixed ? "fixed" : "absolute",
modifiers: [{
name: "eventListeners",
enabled: eventsEnabled
}, {
name: "applyStyles",
enabled: false
}, {
name: "flip",
enabled: flip,
options: {
padding: 8
if (((_state$modifiersData$ = state.modifiersData.arrow) == null ? void 0 : _state$modifiersData$.centerOffset) !== 0) {
arrow.setAttribute("data-hide", "");
} else {
arrow.removeAttribute("data-hide");
}
}, {
name: "computeStyles",
options: {
gpuAcceleration: false,
adaptive: false
}
}, {
name: "offset",
options: {
offset: offset
}
}, {
name: "preventOverflow",
enabled: preventOverflow,
options: {
tetherOffset: function tetherOffset() {
var _arrowRef$current;
}
}
}];
}, [arrowNode, arrowPadding, flip, preventOverflow, offset, gutter, matchWidth]);
var popperJS = (0, _reactPopper.usePopper)(referenceNode, popperNode, {
placement: placement,
strategy: fixed ? "fixed" : "absolute",
modifiers: customMofidiers.concat(modifiers)
});
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
});
return ((_arrowRef$current = arrowRef.current) == null ? void 0 : _arrowRef$current.clientWidth) || 0;
}
}
}, {
name: "arrow",
enabled: Boolean(arrowRef.current),
options: {
element: arrowRef.current
}
}, {
name: "updateState",
phase: "write",
enabled: true,
fn: function fn(_ref) {
var state = _ref.state;
setPlacement(state.placement);
setPopoverStyles(state.styles.popper);
setArrowStyles(state.styles.arrow);
}
}].concat(modifiersOverride)
});
var getReferenceProps = function getReferenceProps(props, _ref) {
if (props === void 0) {
props = {};
}
return function () {
if (popper.current) {
popper.current.destroy();
popper.current = null;
}
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow, eventsEnabled]);
useSafeLayoutEffect(function () {
var id = requestAnimationFrame(function () {
if (forceUpdate) {
var _popper$current;
if (_ref === void 0) {
_ref = null;
}
(_popper$current = popper.current) == null ? void 0 : _popper$current.forceUpdate();
}
return _extends({}, props, {
ref: (0, _utils.mergeRefs)(setReferenceNode, _ref)
});
return function () {
cancelAnimationFrame(id);
};
}, [forceUpdate]);
};
var computedArrowStyles = _extends({}, arrowStyles, (0, _popper.getArrowStyles)(placement, arrowSize, arrowShadowColor));
var getPopperProps = function getPopperProps(props, _ref) {
var _popperJS$styles;
return {
popperInstance: popper.current,
reference: {
ref: referenceRef
},
popper: {
ref: popoverRef,
style: _extends({}, popoverStyles, {
transformOrigin: (0, _popper.toTransformOrigin)(placement)
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)
});
};
var getArrowWrapperProps = function getArrowWrapperProps(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)
});
};
var getArrowProps = function getArrowProps(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)"
})
},
arrow: {
ref: arrowRef,
style: computedArrowStyles
},
update: update,
placement: placement,
place: place
});
};
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
};
}
//# sourceMappingURL=use-popper.js.map

1

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

48

dist/esm/popper.utils.js

@@ -1,26 +0,6 @@

var oppositeDirections = {
top: "bottom",
bottom: "top",
right: "left",
left: "right"
};
export var getOppositePosition = position => oppositeDirections[position];
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 splitPlacement = placement => placement.split("-");
export function getBoxShadow(placement, color) {
if (!color) return undefined;
export function getArrowStyles(placement, arrowSize, arrowShadowColor) {
if (typeof placement !== "string") return {};
var [position] = splitPlacement(placement);
var oppositePosition = getOppositePosition(position);
if (!oppositePosition) return {};
return {
[oppositePosition]: "-" + arrowSize / 2 + "px",
width: arrowSize,
height: arrowSize,
position: "absolute",
transform: "rotate(45deg)",
boxShadow: arrowShadowColor ? getBoxShadow(placement, arrowShadowColor) : undefined
};
}
export function getBoxShadow(placement, color) {
if (placement.includes("top")) {

@@ -41,2 +21,4 @@ return "2px 2px 2px 0 " + color;

}
return undefined;
}

@@ -58,2 +40,22 @@ var transformEnum = {

export var toTransformOrigin = placement => transformEnum[placement];
export var getArrowStyles = options => {
var {
arrowSize,
popperArrowStyles = {},
placement
} = options;
var styles = _extends({}, popperArrowStyles, {
width: arrowSize,
height: arrowSize,
zIndex: -1
});
var offsetAdjust = -(arrowSize / 2);
if (placement.startsWith("top")) styles.bottom = offsetAdjust;
if (placement.startsWith("bottom")) styles.top = offsetAdjust;
if (placement.startsWith("left")) styles.right = offsetAdjust;
if (placement.startsWith("right")) styles.left = offsetAdjust;
return styles;
};
//# sourceMappingURL=popper.utils.js.map

292

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 { createPopper } from "@popperjs/core";
import { getArrowStyles, toTransformOrigin } from "./popper.utils";
var isBrowser = typeof window !== "undefined";
var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
import { usePopper as useBasePopper } from "react-popper";
import { getArrowStyles, getBoxShadow, toTransformOrigin } from "./popper.utils";
export function usePopper(props) {
var _popperJS$state$place, _popperJS$state;
if (props === void 0) {

@@ -14,136 +15,189 @@ props = {};

var {
placement: initialPlacement = "bottom",
offset: offsetProp,
placement = "bottom",
preventOverflow = true,
fixed = false,
forceUpdate = true,
flip = true,
arrowSize = 10,
arrowSize = 8,
arrowShadowColor,
gutter = arrowSize,
eventsEnabled = true,
modifiers
gutter = 8,
arrowPadding = 4,
offset,
matchWidth,
modifiers = []
} = props;
var popper = React.useRef(null);
var referenceRef = React.useRef(null);
var popoverRef = React.useRef(null);
var arrowRef = React.useRef(null);
var [originalPlacement, place] = React.useState(initialPlacement);
var [placement, setPlacement] = React.useState(initialPlacement);
var [offset] = React.useState(offsetProp || [0, gutter]);
var [popoverStyles, setPopoverStyles] = React.useState({});
var [arrowStyles, setArrowStyles] = React.useState({});
var update = React.useCallback(() => {
if (popper.current) {
popper.current.forceUpdate();
return true;
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 customMofidiers = React.useMemo(() => [// @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",
return false;
}, []);
var modifiersOverride = modifiers != null ? modifiers : [];
useSafeLayoutEffect(() => {
if (referenceRef.current && popoverRef.current) {
popper.current = createPopper(referenceRef.current, popoverRef.current, {
placement: originalPlacement,
strategy: fixed ? "fixed" : "absolute",
modifiers: [{
name: "eventListeners",
enabled: eventsEnabled
}, {
name: "applyStyles",
enabled: false
}, {
name: "flip",
enabled: flip,
options: {
padding: 8
}
}, {
name: "computeStyles",
options: {
gpuAcceleration: false,
adaptive: false
}
}, {
name: "offset",
options: {
offset
}
}, {
name: "preventOverflow",
enabled: preventOverflow,
options: {
tetherOffset: () => {
var _arrowRef$current;
fn(_ref4) {
var {
state
} = _ref4;
var {
arrow
} = state.elements;
return ((_arrowRef$current = arrowRef.current) == null ? void 0 : _arrowRef$current.clientWidth) || 0;
}
}
}, {
name: "arrow",
enabled: Boolean(arrowRef.current),
options: {
element: arrowRef.current
}
}, {
name: "updateState",
phase: "write",
enabled: true,
if (arrow) {
var _state$modifiersData$;
fn(_ref) {
var {
state
} = _ref;
setPlacement(state.placement);
setPopoverStyles(state.styles.popper);
setArrowStyles(state.styles.arrow);
}
if (((_state$modifiersData$ = state.modifiersData.arrow) == null ? void 0 : _state$modifiersData$.centerOffset) !== 0) {
arrow.setAttribute("data-hide", "");
} else {
arrow.removeAttribute("data-hide");
}
}
}
}, ...modifiersOverride]
});
}], [arrowNode, arrowPadding, flip, preventOverflow, offset, gutter, matchWidth]);
var popperJS = useBasePopper(referenceNode, popperNode, {
placement,
strategy: fixed ? "fixed" : "absolute",
modifiers: customMofidiers.concat(modifiers)
});
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 = function getReferenceProps(props, _ref) {
if (props === void 0) {
props = {};
}
return () => {
if (popper.current) {
popper.current.destroy();
popper.current = null;
}
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow, eventsEnabled]);
useSafeLayoutEffect(() => {
var id = requestAnimationFrame(() => {
if (forceUpdate) {
var _popper$current;
if (_ref === void 0) {
_ref = null;
}
(_popper$current = popper.current) == null ? void 0 : _popper$current.forceUpdate();
}
return _extends({}, props, {
ref: mergeRefs(setReferenceNode, _ref)
});
return () => {
cancelAnimationFrame(id);
};
}, [forceUpdate]);
};
var computedArrowStyles = _extends({}, arrowStyles, getArrowStyles(placement, arrowSize, arrowShadowColor));
var getPopperProps = function getPopperProps(props, _ref) {
var _popperJS$styles;
return {
popperInstance: popper.current,
reference: {
ref: referenceRef
},
popper: {
ref: popoverRef,
style: _extends({}, popoverStyles, {
transformOrigin: toTransformOrigin(placement)
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)
});
};
var getArrowWrapperProps = function getArrowWrapperProps(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)
});
};
var getArrowProps = function getArrowProps(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)"
})
},
arrow: {
ref: arrowRef,
style: computedArrowStyles
},
update,
placement,
place
});
};
return {
transformOrigin: toTransformOrigin(finalPlacement),
getReferenceProps,
getPopperProps,
getArrowWrapperProps,
getArrowProps,
state: popperJS.state,
forceUpdate: popperJS.forceUpdate,
update: popperJS.update,
placement: finalPlacement
};
}
//# sourceMappingURL=use-popper.js.map

1

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

19

dist/types/popper.utils.d.ts

@@ -1,14 +0,11 @@

/// <reference types="react" />
import type { CSSProperties } from "react";
import { Placement } from "@popperjs/core";
declare const oppositeDirections: {
top: string;
bottom: string;
right: string;
left: string;
};
declare type Direction = keyof typeof oppositeDirections;
export declare const getOppositePosition: (position: Direction) => string;
export declare function getArrowStyles(placement: Placement | undefined, arrowSize: number, arrowShadowColor?: string): React.CSSProperties;
export declare function getBoxShadow(placement: Placement, color: string): string | undefined;
export declare function getBoxShadow(placement: Placement, color?: string): string | undefined;
export declare const toTransformOrigin: (placement: Placement) => any;
interface GetArrowStyleOptions {
arrowSize: number;
popperArrowStyles?: CSSProperties;
placement: Placement;
}
export declare const getArrowStyles: (options: GetArrowStyleOptions) => CSSProperties;
export {};

16

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

@@ -25,2 +25,8 @@ "keywords": [

"typings": "dist/types/index.d.ts",
"exports": {
".": {
"require": "./dist/cjs/index.js",
"default": "./dist/esm/index.js"
}
},
"files": [

@@ -54,8 +60,10 @@ "dist"

"dependencies": {
"@popperjs/core": "2.4.4"
"@chakra-ui/utils": "1.0.0-rc.6",
"@popperjs/core": "2.4.4",
"react-popper": "2.2.3"
},
"peerDependencies": {
"react": "16.x"
"react": "16.x || 17.x"
},
"gitHead": "b5c8482b778b19f27ea1d6c8ab6d5ed39c664afa"
"gitHead": "e55b45840d1edc821ad0bb45632535333be5bb86"
}

108

README.md

@@ -11,1 +11,109 @@ # Popper

```
## Basic usage
By default, the `usePopper` hook returns props for the popper, reference and
arrow.
```jsx
const { popper, reference, arrow } = usePopper()
```
## Changing the placement
You can change the placement of the popper by passing the `placement` option to
`usePopper` and set it to the `popper.js` placement.
```jsx
const { popper, reference, arrow, transformOrigin } = usePopper({
placement: "right-start",
})
```
### Match reference's width
In some cases, you might want to allow the popper take the width of the
reference. For example, autocomplete, select, etc.
To achieve this, pass the `matchWidth` option and set it to `true`
```jsx
const { popper, reference, arrow, transformOrigin } = usePopper({
placement: "right-start",
matchWidth: true,
})
```
### Adding transition
When add transitions to a popper component, it's usually advised to apply popper
and transition to different elements.
```jsx
// 1. Import components
import { useDisclosure } from "@chakra-ui/hooks"
import { usePopper } from "@chakra-ui/popper"
import { motion, AnimatePresence } from "framer-motion"
export function Example() {
// 2. Create toggle state
const { isOpen, onToggle } = useDisclosure()
// 3. Create motion variants
const slide: Variants = {
exit: {
y: -2,
opacity: 0,
},
enter: {
y: 0,
opacity: 1,
},
}
// 4. Consume the `usePopper` hook
const { getPopperProps, getReferenceProps, getArrowProps } = usePopper({
placement: "bottom-start",
})
return (
<>
<button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>
<div {...popper}>
<AnimatePresence>
{isOpen && (
<motion.div
transition={{
type: "spring",
duration: 0.2,
}}
variants={slide}
initial="exit"
animate="enter"
exit="exit"
style={{
background: "red",
width: 200,
transformOrigin,
borderRadius: 4,
}}
>
Testing
<div
{...getArrowProps({
style: {
background: "red",
},
})}
/>
</motion.div>
)}
</AnimatePresence>
</div>
</>
)
}
```
> When not rendering the popper conditionally, we recommend using
> `visibility: hidden` instead of `hidden` or `display: none`
dist/cjs/popper.modifiers.js
dist/cjs/popper.modifiers.js.map
dist/esm/popper.modifiers.js
dist/esm/popper.modifiers.js.map
dist/types/popper.modifiers.d.ts
dist/cjs/index.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/popper.utils.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/popper.utils.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

dist/types/use-popper.d.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc