@zendeskgarden/react-theming - npm Package Compare versions

Comparing version 9.0.0-next.0 to 9.0.0-next.1

dist/index.cjs.js

@@ -333,9 +333,2 @@ /**
 
-function isRtl() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return Boolean(theme && theme.rtl);
-}
-
 function retrieveComponentStyles(componentId, props) {
@@ -353,13 +346,20 @@ const components = props.theme && props.theme.components;
 
-function withTheme(WrappedComponent) {
-  return styledComponents.withTheme(WrappedComponent);
-}
+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 getArrowPosition = placement => {
+  return POSITION_MAP[placement];
+};
 
-function getDocument() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return theme && theme.document || document;
-}
-
 const DEFAULT_SHADE = 600;
@@ -415,2 +415,57 @@ const adjust = (color, expected, actual) => {
 
+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',
+  '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'
+};
+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 => {
@@ -453,2 +508,6 @@ let {
 
+const getMenuPosition = placement => {
+  return placement.split('-')[0];
+};
+
 const maxWidth = (breakpoints, breakpoint) => {
@@ -658,2 +717,3 @@ const keys = Object.keys(breakpoints);
 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'];
 
@@ -664,2 +724,3 @@ exports.ARRAY_ARROW_POSITION = ARROW_POSITION;
 exports.PALETTE = PALETTE;
+exports.PLACEMENT = PLACEMENT;
 exports.SELECTOR_FOCUS_VISIBLE = SELECTOR_FOCUS_VISIBLE;
@@ -669,7 +730,8 @@ exports.ThemeProvider = ThemeProvider;
 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;
@@ -682,2 +744,1 @@ exports.menuStyles = menuStyles;
 exports.useWindow = useWindow;
-exports.withTheme = withTheme;

dist/index.esm.js

@@ -9,3 +9,3 @@ /**
 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';
@@ -327,9 +327,2 @@ import { getControlledValue } from '@zendeskgarden/container-utilities';
 
-function isRtl() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return Boolean(theme && theme.rtl);
-}
-
 function retrieveComponentStyles(componentId, props) {
@@ -347,13 +340,20 @@ const components = props.theme && props.theme.components;
 
-function withTheme(WrappedComponent) {
-  return withTheme$1(WrappedComponent);
-}
+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 getArrowPosition = placement => {
+  return POSITION_MAP[placement];
+};
 
-function getDocument() {
-  let {
-    theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return theme && theme.document || document;
-}
-
 const DEFAULT_SHADE = 600;
@@ -409,2 +409,57 @@ const adjust = (color, expected, actual) => {
 
+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',
+  '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'
+};
+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 => {
@@ -447,2 +502,6 @@ let {
 
+const getMenuPosition = placement => {
+  return placement.split('-')[0];
+};
+
 const maxWidth = (breakpoints, breakpoint) => {
@@ -652,3 +711,4 @@ const keys = Object.keys(breakpoints);
 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 };

dist/typings/index.d.ts

@@ -10,11 +10,11 @@ /**
 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';
@@ -27,2 +27,2 @@ export { default as arrowStyles } from './utils/arrowStyles';
 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';

dist/typings/types/index.d.ts

@@ -13,2 +13,4 @@ /**
 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;
@@ -15,0 +17,0 @@ export interface IGardenTheme {

package.json

 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.0",
+  "version": "9.0.0-next.1",
   "description": "Theming utilities and components within the Garden Design System",
@@ -24,2 +24,3 @@ "license": "Apache-2.0",
   "dependencies": {
+    "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-focusvisible": "^2.0.0",
@@ -34,3 +35,3 @@ "@zendeskgarden/container-utilities": "^2.0.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^4.2.0 || ^5.0.0"
+    "styled-components": "^4.2.0 || ^5.1.0"
   },
@@ -50,3 +51,3 @@ "devDependencies": {
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7145e970afa57b024ab7d505f2220a656e430c04"
+  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
 }

README.md

@@ -55,18 +55,1 @@ # @zendeskgarden/react-theming [![npm version](https://flat.badgen.net/npm/v/@zendeskgarden/react-theming)](https://www.npmjs.com/package/@zendeskgarden/react-theming)
 ```
-
-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>;
-```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83432

increased by6.87%

Lines of code

2083

increased by7.76%

Worsened metrics

Dependency count

9

increased by12.5%

Number of lines in readme file

55

decreased by-23.61%

Dependency changes

• + Added@floating-ui/react-dom@^2.0.0

• + Added@floating-ui/core@1.6.8(transitive)

• + Added@floating-ui/dom@1.6.12(transitive)

• + Added@floating-ui/react-dom@2.1.2(transitive)

• + Added@floating-ui/utils@0.2.8(transitive)