		# Change Log

		## 2.2.2-next.0
		## 2.3.0

		### Patch Changes
		### Minor Changes

		- Updated dependencies []:
		- @chakra-ui/react-utils@1.1.3-next.0
		- [`4146a9051`](https://github.com/chakra-ui/chakra-ui/commit/4146a9051a5151532503e31c464193e9d118dd26)
		[#3837](https://github.com/chakra-ui/chakra-ui/pull/3837) Thanks
		[@mcha-dev](https://github.com/mcha-dev)! - `usePopper` now accepts a
		`direction` prop so it can handle placement for RTL languages. Values such as
		`top-start`, `top-end`, `bottom-start` and `bottom-end` will be flipped
		depending on the theme's direction value.

		In addition to the default `popper.js` placement, you can pass `start-start`,
		`start-end`, `end-start` and `end-end`. This will resolve to the equivalent
		`popper.js` placement as well.

		## 2.2.1
		@@ -11,0 +19,0 @@

dist/cjs/use-popper.js

		@@ -14,2 +14,4 @@ "use strict";

		var _popper = require("./popper.placement");

		var _utils = require("./utils");
		@@ -52,6 +54,9 @@
		preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
		matchWidth = _props.matchWidth;
		matchWidth = _props.matchWidth,
		_props$direction = _props.direction,
		direction = _props$direction === void 0 ? "ltr" : _props$direction;
		var reference = (0, _react.useRef)(null);
		var popper = (0, _react.useRef)(null);
		var instance = (0, _react.useRef)(null);
		var placement = (0, _popper.getPopperPlacement)(placementProp, direction);
		var cleanup = (0, _react.useRef)(function () {});
		@@ -63,3 +68,3 @@ var setupPopper = (0, _react.useCallback)(function () {
		instance.current = (0, _core.createPopper)(reference.current, popper.current, {
		placement: placementProp,
		placement: placement,
		modifiers: [customModifiers.innerArrow, customModifiers.positionArrow, customModifiers.transformOrigin, _extends({}, customModifiers.matchWidth, {
		@@ -97,3 +102,3 @@ enabled: !!matchWidth
		cleanup.current = instance.current.destroy;
		}, [enabled, placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
		}, [placement, enabled, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
		(0, _react.useEffect)(function () {
		@@ -100,0 +105,0 @@ return function () {

dist/esm/use-popper.js

		@@ -9,2 +9,3 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
		import * as customModifiers from "./modifiers";
		import { getPopperPlacement } from "./popper.placement";
		import { cssVars, getEventListenerOptions } from "./utils";
		@@ -28,3 +29,4 @@ export function usePopper(props) {
		preventOverflow = true,
		matchWidth
		matchWidth,
		direction = "ltr"
		} = props;
		@@ -34,2 +36,3 @@ var reference = useRef(null);
		var instance = useRef(null);
		var placement = getPopperPlacement(placementProp, direction);
		var cleanup = useRef(() => {});
		@@ -41,3 +44,3 @@ var setupPopper = useCallback(() => {
		instance.current = createPopper(reference.current, popper.current, {
		placement: placementProp,
		placement,
		modifiers: [customModifiers.innerArrow, customModifiers.positionArrow, customModifiers.transformOrigin, _extends({}, customModifiers.matchWidth, {
		@@ -76,3 +79,3 @@ enabled: !!matchWidth
		cleanup.current = instance.current.destroy;
		}, [enabled, placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
		}, [placement, enabled, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
		useEffect(() => {
		@@ -79,0 +82,0 @@ return () => {

dist/types/index.d.ts

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

dist/types/use-popper.d.ts

		import { PropGetterV2 } from "@chakra-ui/react-utils";
		import { Modifier, Placement, VirtualElement } from "@popperjs/core";
		export type { Placement };
		import { Modifier, VirtualElement } from "@popperjs/core";
		import { PlacementWithLogical } from "./popper.placement";
		export interface UsePopperProps {
		@@ -67,3 +67,3 @@ /**
		*/
		placement?: Placement;
		placement?: PlacementWithLogical;
		/**
		@@ -76,2 +76,8 @@ * Array of popper.js modifiers. Check the docs to see
		modifiers?: Array<Partial<Modifier<string, any>>>;
		/**
		* Theme direction `ltr` or `rtl`. Popper's placement will
		* be set accordingly
		* @default "ltr"
		*/
		direction?: "ltr" \| "rtl";
		}
		@@ -78,0 +84,0 @@ export declare type ArrowCSSVarProps = {

package.json

		{
		"name": "@chakra-ui/popper",
		"version": "2.2.2-next.0",
		"version": "2.3.0",
		"description": "A React component and hooks wrapper for popper.js",
		@@ -60,3 +60,3 @@ "keywords": [
		"dependencies": {
		"@chakra-ui/react-utils": "1.1.3-next.0",
		"@chakra-ui/react-utils": "1.1.2",
		"@popperjs/core": "2.4.4"
		@@ -63,0 +63,0 @@ },

dist/cjs/index.js.map