@zendeskgarden/react-theming 9.0.0-next.1 → 9.0.0-next.2

package/dist/index.cjs.js

@@ -356,8 +356,18 @@ const POSITION_MAP = {
   'left-start': 'right-top',
   'left-end': 'right-bottom'
 };
-const getArrowPosition = placement => {
-  return POSITION_MAP[placement];
+const RTL_POSITION_MAP = {
+  'bottom-left': 'bottom-right',
+  'bottom-right': 'bottom-left',
+  'top-left': 'top-right',
+  'top-right': 'top-left'
+};
+const getArrowPosition = (theme, placement) => {
+  let retVal = POSITION_MAP[placement];
+  if (theme.rtl) {
+    retVal = RTL_POSITION_MAP[retVal] || retVal;
+  }
+  return retVal;
 };
 
 const DEFAULT_SHADE = 600;
@@ -422,13 +432,9 @@ const RTL_PLACEMENT_MAP = {
   left: 'right',
   'left-start': 'right-start',
   'left-end': 'right-end',
-  'top-start': 'top-end',
-  'top-end': 'top-start',
   right: 'left',
   'right-start': 'left-start',
-  'right-end': 'left-end',
-  'bottom-start': 'bottom-end',
-  'bottom-end': 'bottom-start'
+  'right-end': 'left-end'
 };
 const toFloatingPlacement = (placement, theme) => {
   let retVal = PLACEMENT_MAP[placement] || placement;

package/dist/index.esm.js

@@ -349,8 +349,18 @@ const POSITION_MAP = {
   'left-start': 'right-top',
   'left-end': 'right-bottom'
 };
-const getArrowPosition = placement => {
-  return POSITION_MAP[placement];
+const RTL_POSITION_MAP = {
+  'bottom-left': 'bottom-right',
+  'bottom-right': 'bottom-left',
+  'top-left': 'top-right',
+  'top-right': 'top-left'
+};
+const getArrowPosition = (theme, placement) => {
+  let retVal = POSITION_MAP[placement];
+  if (theme.rtl) {
+    retVal = RTL_POSITION_MAP[retVal] || retVal;
+  }
+  return retVal;
 };
 
 const DEFAULT_SHADE = 600;
@@ -415,13 +425,9 @@ const RTL_PLACEMENT_MAP = {
   left: 'right',
   'left-start': 'right-start',
   'left-end': 'right-end',
-  'top-start': 'top-end',
-  'top-end': 'top-start',
   right: 'left',
   'right-start': 'left-start',
-  'right-end': 'left-end',
-  'bottom-start': 'bottom-end',
-  'bottom-end': 'bottom-start'
+  'right-end': 'left-end'
 };
 const toFloatingPlacement = (placement, theme) => {
   let retVal = PLACEMENT_MAP[placement] || placement;

package/dist/typings/utils/getArrowPosition.d.ts

@@ -5,13 +5,15 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { Placement } from '@floating-ui/react-dom';
-import { ArrowPosition } from '../types';
+import { ArrowPosition, IGardenTheme } from '../types';
 export declare const POSITION_MAP: Record<Placement, ArrowPosition>;
+export declare const RTL_POSITION_MAP: Record<string, ArrowPosition>;
 /**
  * Convert Floating-UI placement to a valid `arrowStyles` position.
  *
+ * @param {Object} theme Context `theme` object used to determine if layout is right-to-left.
  * @param {string} placement A Floating-UI placement.
  *
  * @returns An `arrowStyles` position.
  */
-export declare const getArrowPosition: (placement: Placement) => ArrowPosition;
+export declare const getArrowPosition: (theme: IGardenTheme, placement: Placement) => ArrowPosition;

package/dist/typings/utils/menuStyles.d.ts

@@ -16,8 +16,8 @@ type MenuOptions = {
 };
 /**
  * CSS for a `wrapper > menu` at the given position. The wrapper provides
- * absolute positioning (e.g. via Popper). The menu provides basic styling and
- * optional animation.
+ * absolute positioning (e.g. via Floating-UI). The menu provides basic styling
+ * and optional animation.
  *
  * @param {string} position One of:
  *  - `'top'`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.2",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
+  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
 }