@dhis2-ui/popper 9.3.0 → 9.4.0-alpha.1

package/build/cjs/popper.js

@@ -25,6 +25,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
+const flipPlacement = placement => {
+  if (placement.startsWith('right')) {
+    return placement.replace('right', 'left');
+  }
+
+  if (placement.startsWith('left')) {
+    return placement.replace('left', 'right');
+  }
+
+  return placement;
+};
+
 const Popper = _ref => {
   let {
     children,
@@ -50,7 +62,7 @@ const Popper = _ref => {
   } = (0, _reactPopper.usePopper)(referenceElement, popperElement, {
     strategy,
     onFirstUpdate,
-    placement,
+    placement: document.documentElement.dir === 'rtl' ? flipPlacement(placement) : placement,
     modifiers: deduplicatedModifiers
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({

package/build/cjs/popper.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VirtualElementRef = exports.TopStart = exports.TopEnd = exports.Top = exports.RightStart = exports.RightEnd = exports.Right = exports.LeftStart = exports.LeftEnd = exports.Left = exports.ElementRef = exports.BottomStart = exports.BottomEnd = exports.Bottom = void 0;
+exports.default = exports.VirtualElementRef = exports.TopStart = exports.TopEnd = exports.Top = exports.RightStart = exports.RightEnd = exports.Right = exports.RTL = exports.LeftStart = exports.LeftEnd = exports.Left = exports.ElementRef = exports.BottomStart = exports.BottomEnd = exports.Bottom = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -198,4 +198,22 @@ VirtualElementRef.parameters = {
       type: 'code'
     }
   }
-};
+};
+
+const RTL = args => {
+  (0, _react.useEffect)(() => {
+    document.documentElement.setAttribute('dir', 'rtl');
+    return () => {
+      document.documentElement.setAttribute('dir', 'ltr');
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    dir: "rtl"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "If dir=rtl, `left` and `right` placement are reversed"), /*#__PURE__*/_react.default.createElement(Template, _extends({}, args, {
+    placement: "left"
+  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(Template, _extends({}, args, {
+    placement: "right-start"
+  })));
+};
+
+exports.RTL = RTL;

package/build/es/popper.js

@@ -7,6 +7,18 @@ import { usePopper } from 'react-popper';
 import { getReferenceElement } from './get-reference-element.js';
 import { deduplicateModifiers } from './modifiers.js';
 
+const flipPlacement = placement => {
+  if (placement.startsWith('right')) {
+    return placement.replace('right', 'left');
+  }
+
+  if (placement.startsWith('left')) {
+    return placement.replace('left', 'right');
+  }
+
+  return placement;
+};
+
 const Popper = _ref => {
   let {
     children,
@@ -32,7 +44,7 @@ const Popper = _ref => {
   } = usePopper(referenceElement, popperElement, {
     strategy,
     onFirstUpdate,
-    placement,
+    placement: document.documentElement.dir === 'rtl' ? flipPlacement(placement) : placement,
     modifiers: deduplicatedModifiers
   });
   return /*#__PURE__*/React.createElement("div", _extends({

package/build/es/popper.stories.js

@@ -1,7 +1,7 @@
 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 { sharedPropTypes } from '@dhis2/ui-constants';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Popper } from './popper.js';
 const description = "\nA tool for adding additional information or content outside of the document flow, used for example in the Tooltip or Popover components.\n\nSince it's built using [Popper.js](https://popper.js.org/docs/v2/) and [react-popper](https://popper.js.org/react-popper/), some of that functionality can be accessed through the props of this component, like modifiers.\n\n```js\nimport { Popper } from '@dhis2/ui'\n```\n\n_**Note**: Some of the stories may not look right on this page. View those examples in the 'Canvas' tab instead._\n";
 export default {
@@ -165,4 +165,19 @@ VirtualElementRef.parameters = {
       type: 'code'
     }
   }
+};
+export const RTL = args => {
+  useEffect(() => {
+    document.documentElement.setAttribute('dir', 'rtl');
+    return () => {
+      document.documentElement.setAttribute('dir', 'ltr');
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    dir: "rtl"
+  }, /*#__PURE__*/React.createElement("span", null, "If dir=rtl, `left` and `right` placement are reversed"), /*#__PURE__*/React.createElement(Template, _extends({}, args, {
+    placement: "left"
+  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Template, _extends({}, args, {
+    placement: "right-start"
+  })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popper",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.1",
     "description": "UI Popper",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.1",
         "@popperjs/core": "^2.10.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2",