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

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;
@@ -712,9 +718,9 @@ const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'r
 const MENU_POSITION = ['top', 'right', 'bottom', 'left'];
 const PLACEMENT = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
 
-exports.ARRAY_ARROW_POSITION = ARROW_POSITION;
-exports.ARRAY_MENU_POSITION = MENU_POSITION;
+exports.ARROW_POSITION = ARROW_POSITION;
 exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.MENU_POSITION = MENU_POSITION;
 exports.PALETTE = PALETTE;
 exports.PLACEMENT = PLACEMENT;
 exports.SELECTOR_FOCUS_VISIBLE = SELECTOR_FOCUS_VISIBLE;
@@ -730,7 +736,6 @@ exports.getMenuPosition = getMenuPosition;
 exports.mediaQuery = mediaQuery;
 exports.menuStyles = menuStyles;
 exports.retrieveComponentStyles = retrieveComponentStyles;
-exports.retrieveTheme = retrieveComponentStyles;
 exports.useDocument = useDocument;
 exports.useText = useText;
 exports.useWindow = useWindow;

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;
@@ -705,4 +711,4 @@ const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'r
 const MENU_POSITION = ['top', 'right', 'bottom', 'left'];
 const PLACEMENT = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
 
-export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, PLACEMENT, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getArrowPosition, getColor, getFloatingPlacements, getFocusBoxShadow, getLineHeight, getMenuPosition, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, useWindow };
+export { ARROW_POSITION, DEFAULT_THEME, MENU_POSITION, PALETTE, PLACEMENT, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getArrowPosition, getColor, getFloatingPlacements, getFocusBoxShadow, getLineHeight, getMenuPosition, mediaQuery, menuStyles, retrieveComponentStyles, useDocument, useText, useWindow };

package/dist/typings/elements/ThemeProvider.d.ts

@@ -5,10 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { PropsWithChildren } from 'react';
-import { IThemeProviderProps } from '../types';
+import { IGardenTheme, IThemeProviderProps } from '../types';
 export declare const ThemeProvider: {
     ({ theme, focusVisibleRef, children, ...other }: PropsWithChildren<IThemeProviderProps>): React.JSX.Element;
     defaultProps: {
-        theme: import("../types").IGardenTheme;
+        theme: IGardenTheme;
     };
 };

package/dist/typings/index.d.ts

@@ -7,9 +7,7 @@
 export { ThemeProvider } from './elements/ThemeProvider';
 export { default as DEFAULT_THEME } from './elements/theme';
 export { default as PALETTE } from './elements/palette';
-export { default as retrieveComponentStyles, 
-/** `retrieveTheme` is a deprecated usage for v7 compatability */
-default as retrieveTheme } from './utils/retrieveComponentStyles';
+export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles';
 export { getArrowPosition } from './utils/getArrowPosition';
 export { getColor } from './utils/getColor';
 export { getFloatingPlacements } from './utils/getFloatingPlacements';
@@ -23,4 +21,4 @@ export { useWindow } from './utils/useWindow';
 export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
-export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition as ARROW_POSITION, type MenuPosition as MENU_POSITION, type Placement } from './types';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition, type MenuPosition, type Placement } from './types';

package/dist/typings/types/index.d.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="react" />
-import { ThemeProps } from 'styled-components';
+import { ThemeProviderProps } from 'styled-components';
 export declare const ARROW_POSITION: readonly ["top", "top-left", "top-right", "right", "right-top", "right-bottom", "bottom", "bottom-left", "bottom-right", "left", "left-top", "left-bottom"];
 export type ArrowPosition = (typeof ARROW_POSITION)[number];
 export declare const MENU_POSITION: readonly ["top", "right", "bottom", "left"];
@@ -111,13 +111,13 @@ export interface IGardenTheme {
     };
     palette: Record<string, Hue>;
 }
-export interface IThemeProviderProps extends Partial<ThemeProps<IGardenTheme>> {
+export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenTheme>> {
     /**
      * Provides values for component styling. See styled-components
      * [`ThemeProvider`](https://styled-components.com/docs/api#themeprovider)
      * for details.
      */
-    theme?: IGardenTheme;
+    theme?: IGardenTheme | ((theme: IGardenTheme) => IGardenTheme);
     /**
      * Provides a reference to the DOM node used to scope a `:focus-visible`
      * polyfill. If left `undefined`, a scoping `<div>` will be rendered.

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.3",
   "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": "d5086e8a3ae0c8608361966954bf434ef03005ec"
 }