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

package/README.md

@@ -52,20 +52,3 @@ import { Notification } from '@zendeskgarden/react-notifications';
   <Notification>This notification content will render with RTL layout.</Notification>
 </ThemeProvider>;
 ```
-
-The `withTheme` [HOC](https://reactjs.org/docs/higher-order-components.html)
-utility allows any component to interact with its `ThemeProvider`.
-
-```jsx
-import { withTheme } from '@zendeskgarden/react-theming';
-
-const Div = ({ theme, children }) => (
-  <div style={{ direction: theme.rtl ? 'rtl' : 'ltr' }}>{children}</div>
-);
-
-const LocalizedComponent = withTheme(Div);
-
-<ThemeProvider theme={{ ...DEFAULT_THEME, rtl: true }}>
-  <LocalizedComponent>RTL localizable</LocalizedComponent>
-</ThemeProvider>;
-```

package/dist/index.cjs.js

@@ -330,13 +330,6 @@ ThemeProvider.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function isRtl() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return Boolean(theme && theme.rtl);
-}
-
 function retrieveComponentStyles(componentId, props) {
   const components = props.theme && props.theme.components;
   if (!components) {
@@ -349,16 +342,33 @@ function retrieveComponentStyles(componentId, props) {
   return componentStyles;
 }
 
-function withTheme(WrappedComponent) {
-  return styledComponents.withTheme(WrappedComponent);
-}
-
-function getDocument() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return theme && theme.document || document;
-}
+const POSITION_MAP = {
+  top: 'bottom',
+  'top-start': 'bottom-left',
+  'top-end': 'bottom-right',
+  right: 'left',
+  'right-start': 'left-top',
+  'right-end': 'left-bottom',
+  bottom: 'top',
+  'bottom-start': 'top-left',
+  'bottom-end': 'top-right',
+  left: 'right',
+  'left-start': 'right-top',
+  'left-end': 'right-bottom'
+};
+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;
 const adjust = (color, expected, actual) => {
@@ -410,6 +420,57 @@ const getColor = memoize__default.default(function (hue) {
   transparency
 }));
 
+const PLACEMENT_MAP = {
+  end: 'right',
+  'end-top': 'right-start',
+  'end-bottom': 'right-end',
+  start: 'left',
+  'start-top': 'left-start',
+  'start-bottom': 'left-end'
+};
+const RTL_PLACEMENT_MAP = {
+  left: 'right',
+  'left-start': 'right-start',
+  'left-end': 'right-end',
+  right: 'left',
+  'right-start': 'left-start',
+  'right-end': 'left-end'
+};
+const toFloatingPlacement = (placement, theme) => {
+  let retVal = PLACEMENT_MAP[placement] || placement;
+  if (theme.rtl) {
+    retVal = RTL_PLACEMENT_MAP[retVal] || retVal;
+  }
+  return retVal;
+};
+const SIDE_FALLBACKS_MAP = {
+  top: ['top-start', 'top', 'top-end'],
+  right: ['right-start', 'right', 'right-end'],
+  bottom: ['bottom-start', 'bottom', 'bottom-end'],
+  left: ['left-start', 'left', 'left-end']
+};
+const SIDE_OPPOSITE_MAP = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right'
+};
+const toFallbackPlacements = (primaryPlacement, theme, fallbackPlacements) => {
+  if (Array.isArray(fallbackPlacements) && fallbackPlacements.length > 0) {
+    return fallbackPlacements.map(fallbackPlacement => toFloatingPlacement(fallbackPlacement, theme));
+  }
+  const side = primaryPlacement.split('-')[0];
+  const sameSideFallbackPlacements = [...SIDE_FALLBACKS_MAP[side]];
+  const oppositeSideFallbackPlacements = SIDE_FALLBACKS_MAP[SIDE_OPPOSITE_MAP[side]];
+  sameSideFallbackPlacements.splice(sameSideFallbackPlacements.indexOf(primaryPlacement), 1);
+  return [...sameSideFallbackPlacements, ...oppositeSideFallbackPlacements];
+};
+const getFloatingPlacements = (theme, placement, fallbackPlacements) => {
+  const floatingPlacement = toFloatingPlacement(placement, theme);
+  const floatingFallbackPlacements = toFallbackPlacements(floatingPlacement, theme, fallbackPlacements);
+  return [floatingPlacement, floatingFallbackPlacements];
+};
+
 const getFocusBoxShadow = _ref => {
   let {
     boxShadow,
@@ -447,6 +508,10 @@ function getLineHeight(height, fontSize) {
   return heightValue / fontSizeValue;
 }
 
+const getMenuPosition = placement => {
+  return placement.split('-')[0];
+};
+
 const maxWidth = (breakpoints, breakpoint) => {
   const keys = Object.keys(breakpoints);
   const index = keys.indexOf(breakpoint) + 1;
@@ -651,20 +716,23 @@ const focusStyles = _ref => {
 
 const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 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.DEFAULT_THEME = DEFAULT_THEME;
 exports.PALETTE = PALETTE;
+exports.PLACEMENT = PLACEMENT;
 exports.SELECTOR_FOCUS_VISIBLE = SELECTOR_FOCUS_VISIBLE;
 exports.ThemeProvider = ThemeProvider;
 exports.arrowStyles = arrowStyles;
 exports.focusStyles = focusStyles;
+exports.getArrowPosition = getArrowPosition;
 exports.getColor = getColor;
-exports.getDocument = getDocument;
+exports.getFloatingPlacements = getFloatingPlacements;
 exports.getFocusBoxShadow = getFocusBoxShadow;
 exports.getLineHeight = getLineHeight;
-exports.isRtl = isRtl;
+exports.getMenuPosition = getMenuPosition;
 exports.mediaQuery = mediaQuery;
 exports.menuStyles = menuStyles;
 exports.retrieveComponentStyles = retrieveComponentStyles;
@@ -672,4 +740,3 @@ exports.retrieveTheme = retrieveComponentStyles;
 exports.useDocument = useDocument;
 exports.useText = useText;
 exports.useWindow = useWindow;
-exports.withTheme = withTheme;

package/dist/index.esm.js

@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { ThemeProvider as ThemeProvider$1, withTheme as withTheme$1, css, keyframes } from 'styled-components';
+import { ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
 import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { rgba, darken, lighten, getValueAndUnit, math } from 'polished';
@@ -323,13 +323,6 @@ ThemeProvider.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function isRtl() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return Boolean(theme && theme.rtl);
-}
-
 function retrieveComponentStyles(componentId, props) {
   const components = props.theme && props.theme.components;
   if (!components) {
@@ -342,16 +335,33 @@ function retrieveComponentStyles(componentId, props) {
   return componentStyles;
 }
 
-function withTheme(WrappedComponent) {
-  return withTheme$1(WrappedComponent);
-}
-
-function getDocument() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return theme && theme.document || document;
-}
+const POSITION_MAP = {
+  top: 'bottom',
+  'top-start': 'bottom-left',
+  'top-end': 'bottom-right',
+  right: 'left',
+  'right-start': 'left-top',
+  'right-end': 'left-bottom',
+  bottom: 'top',
+  'bottom-start': 'top-left',
+  'bottom-end': 'top-right',
+  left: 'right',
+  'left-start': 'right-top',
+  'left-end': 'right-bottom'
+};
+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;
 const adjust = (color, expected, actual) => {
@@ -403,6 +413,57 @@ const getColor = memoize(function (hue) {
   transparency
 }));
 
+const PLACEMENT_MAP = {
+  end: 'right',
+  'end-top': 'right-start',
+  'end-bottom': 'right-end',
+  start: 'left',
+  'start-top': 'left-start',
+  'start-bottom': 'left-end'
+};
+const RTL_PLACEMENT_MAP = {
+  left: 'right',
+  'left-start': 'right-start',
+  'left-end': 'right-end',
+  right: 'left',
+  'right-start': 'left-start',
+  'right-end': 'left-end'
+};
+const toFloatingPlacement = (placement, theme) => {
+  let retVal = PLACEMENT_MAP[placement] || placement;
+  if (theme.rtl) {
+    retVal = RTL_PLACEMENT_MAP[retVal] || retVal;
+  }
+  return retVal;
+};
+const SIDE_FALLBACKS_MAP = {
+  top: ['top-start', 'top', 'top-end'],
+  right: ['right-start', 'right', 'right-end'],
+  bottom: ['bottom-start', 'bottom', 'bottom-end'],
+  left: ['left-start', 'left', 'left-end']
+};
+const SIDE_OPPOSITE_MAP = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right'
+};
+const toFallbackPlacements = (primaryPlacement, theme, fallbackPlacements) => {
+  if (Array.isArray(fallbackPlacements) && fallbackPlacements.length > 0) {
+    return fallbackPlacements.map(fallbackPlacement => toFloatingPlacement(fallbackPlacement, theme));
+  }
+  const side = primaryPlacement.split('-')[0];
+  const sameSideFallbackPlacements = [...SIDE_FALLBACKS_MAP[side]];
+  const oppositeSideFallbackPlacements = SIDE_FALLBACKS_MAP[SIDE_OPPOSITE_MAP[side]];
+  sameSideFallbackPlacements.splice(sameSideFallbackPlacements.indexOf(primaryPlacement), 1);
+  return [...sameSideFallbackPlacements, ...oppositeSideFallbackPlacements];
+};
+const getFloatingPlacements = (theme, placement, fallbackPlacements) => {
+  const floatingPlacement = toFloatingPlacement(placement, theme);
+  const floatingFallbackPlacements = toFallbackPlacements(floatingPlacement, theme, fallbackPlacements);
+  return [floatingPlacement, floatingFallbackPlacements];
+};
+
 const getFocusBoxShadow = _ref => {
   let {
     boxShadow,
@@ -440,6 +501,10 @@ function getLineHeight(height, fontSize) {
   return heightValue / fontSizeValue;
 }
 
+const getMenuPosition = placement => {
+  return placement.split('-')[0];
+};
+
 const maxWidth = (breakpoints, breakpoint) => {
   const keys = Object.keys(breakpoints);
   const index = keys.indexOf(breakpoint) + 1;
@@ -644,5 +709,6 @@ const focusStyles = _ref => {
 
 const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 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, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getColor, getDocument, getFocusBoxShadow, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, useWindow, withTheme };
+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 };

package/dist/typings/index.d.ts

@@ -7,15 +7,15 @@
 export { ThemeProvider } from './elements/ThemeProvider';
 export { default as DEFAULT_THEME } from './elements/theme';
 export { default as PALETTE } from './elements/palette';
-export { default as isRtl } from './utils/isRtl';
 export { default as retrieveComponentStyles, 
 /** `retrieveTheme` is a deprecated usage for v7 compatability */
 default as retrieveTheme } from './utils/retrieveComponentStyles';
-export { default as withTheme } from './utils/withTheme';
-export { default as getDocument } from './utils/getDocument';
+export { getArrowPosition } from './utils/getArrowPosition';
 export { getColor } from './utils/getColor';
+export { getFloatingPlacements } from './utils/getFloatingPlacements';
 export { getFocusBoxShadow } from './utils/getFocusBoxShadow';
 export { default as getLineHeight } from './utils/getLineHeight';
+export { getMenuPosition } from './utils/getMenuPosition';
 export { default as mediaQuery } from './utils/mediaQuery';
 export { default as arrowStyles } from './utils/arrowStyles';
 export { useDocument } from './utils/useDocument';
@@ -23,4 +23,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, type IGardenTheme, type IThemeProviderProps, type ArrowPosition as ARROW_POSITION, type MenuPosition as MENU_POSITION } from './types';
+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';

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

@@ -10,6 +10,8 @@ export declare const ARROW_POSITION: readonly ["top", "top-left", "top-right", "
 export type ArrowPosition = (typeof ARROW_POSITION)[number];
 export declare const MENU_POSITION: readonly ["top", "right", "bottom", "left"];
 export type MenuPosition = (typeof MENU_POSITION)[number];
+export declare const PLACEMENT: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
+export type Placement = (typeof PLACEMENT)[number];
 type Hue = Record<number | string, string> | string;
 export interface IGardenTheme {
     rtl: boolean;

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { Placement } from '@floating-ui/react-dom';
+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: (theme: IGardenTheme, placement: Placement) => ArrowPosition;

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

@@ -0,0 +1,20 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { Placement as FloatingPlacement } from '@floating-ui/react-dom';
+import { IGardenTheme, Placement } from '../types';
+export declare const PLACEMENT_MAP: Record<string, FloatingPlacement>;
+export declare const RTL_PLACEMENT_MAP: Record<string, FloatingPlacement>;
+/**
+ * Convert Garden placements to valid placements for Floating-UI.
+ *
+ * @param {Object} theme Context `theme` object used to determine if layout is right-to-left.
+ * @param {string} placement A Garden placement.
+ * @param {Array} fallbackPlacements Optional list of Garden fallback placements.
+ *
+ * @returns A Floating-UI (placement, fallbackPlacements) tuple.
+ */
+export declare const getFloatingPlacements: (theme: IGardenTheme, placement: Placement, fallbackPlacements?: Placement[]) => [FloatingPlacement, FloatingPlacement[]];

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { Placement } from '@floating-ui/react-dom';
+import { MenuPosition } from '../types';
+/**
+ * Convert Floating-UI placement to a valid `menuStyles` position.
+ *
+ * @param {string} placement A Floating-UI placement.
+ *
+ * @returns A `menuStyles` position.
+ */
+export declare const getMenuPosition: (placement: Placement) => MenuPosition;

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.0",
+  "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>",
@@ -21,6 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-focusvisible": "^2.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "lodash.memoize": "^4.1.2",
@@ -30,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^4.2.0 || ^5.0.0"
+    "styled-components": "^4.2.0 || ^5.1.0"
   },
   "devDependencies": {
     "@types/lodash.memoize": "4.1.9"
@@ -45,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7145e970afa57b024ab7d505f2220a656e430c04"
+  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
 }

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

@@ -1,9 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-import { ThemeProps, DefaultTheme } from 'styled-components';
-/** @component */
-export default function getDocument({ theme }?: Partial<ThemeProps<Partial<DefaultTheme>>>): any;

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

@@ -1,9 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-import { ThemeProps, DefaultTheme } from 'styled-components';
-/** @component */
-export default function isRtl({ theme }?: Partial<ThemeProps<Partial<DefaultTheme>>>): boolean;

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

@@ -1,8 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-/** @component */
-export default function withTheme(WrappedComponent: any): any;