@zendeskgarden/react-theming 8.66.0 → 8.67.0

package/dist/index.cjs.js

@@ -412,10 +412,13 @@ const getColor = memoize__default.default(function (hue) {
 
 const getFocusBoxShadow = _ref => {
   let {
+    boxShadow,
     inset = false,
     hue = 'primaryHue',
     shade = DEFAULT_SHADE,
     shadowWidth = 'md',
+    spacerHue = 'background',
+    spacerShade = DEFAULT_SHADE,
     spacerWidth = 'xs',
     theme = DEFAULT_THEME
   } = _ref;
@@ -424,9 +427,11 @@ const getFocusBoxShadow = _ref => {
   if (spacerWidth === null) {
     return `${inset ? 'inset' : ''} ${shadow}`;
   }
-  return `
-    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](theme.colors.background)},
+  const spacerColor = getColor(spacerHue, spacerShade, theme);
+  const retVal = `
+    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
     ${inset ? 'inset' : ''} ${shadow}`;
+  return boxShadow ? `${retVal}, ${boxShadow}` : retVal;
 };
 
 function getLineHeight(height, fontSize) {
@@ -619,16 +624,20 @@ const focusStyles = _ref => {
     selector = SELECTOR_FOCUS_VISIBLE,
     shadowWidth = 'md',
     spacerWidth = 'xs',
-    styles,
+    styles: {
+      boxShadow,
+      ...styles
+    } = {},
     theme,
     ...options
   } = _ref;
-  const boxShadow = condition ? getFocusBoxShadow({
+  const _boxShadow = condition ? getFocusBoxShadow({
+    boxShadow,
     shadowWidth,
     spacerWidth,
     theme,
     ...options
-  }) : undefined;
+  }) : boxShadow;
   let outline;
   let outlineOffset;
   if (spacerWidth === null) {
@@ -637,7 +646,7 @@ const focusStyles = _ref => {
     outline = `${polished.math(`${theme.shadowWidths[shadowWidth]} - ${theme.shadowWidths[spacerWidth]}`)} solid transparent`;
     outlineOffset = theme.shadowWidths[spacerWidth];
   }
-  return styledComponents.css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, boxShadow, styles);
+  return styledComponents.css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
 };
 
 const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];

package/dist/index.esm.js

@@ -405,10 +405,13 @@ const getColor = memoize(function (hue) {
 
 const getFocusBoxShadow = _ref => {
   let {
+    boxShadow,
     inset = false,
     hue = 'primaryHue',
     shade = DEFAULT_SHADE,
     shadowWidth = 'md',
+    spacerHue = 'background',
+    spacerShade = DEFAULT_SHADE,
     spacerWidth = 'xs',
     theme = DEFAULT_THEME
   } = _ref;
@@ -417,9 +420,11 @@ const getFocusBoxShadow = _ref => {
   if (spacerWidth === null) {
     return `${inset ? 'inset' : ''} ${shadow}`;
   }
-  return `
-    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](theme.colors.background)},
+  const spacerColor = getColor(spacerHue, spacerShade, theme);
+  const retVal = `
+    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
     ${inset ? 'inset' : ''} ${shadow}`;
+  return boxShadow ? `${retVal}, ${boxShadow}` : retVal;
 };
 
 function getLineHeight(height, fontSize) {
@@ -612,16 +617,20 @@ const focusStyles = _ref => {
     selector = SELECTOR_FOCUS_VISIBLE,
     shadowWidth = 'md',
     spacerWidth = 'xs',
-    styles,
+    styles: {
+      boxShadow,
+      ...styles
+    } = {},
     theme,
     ...options
   } = _ref;
-  const boxShadow = condition ? getFocusBoxShadow({
+  const _boxShadow = condition ? getFocusBoxShadow({
+    boxShadow,
     shadowWidth,
     spacerWidth,
     theme,
     ...options
-  }) : undefined;
+  }) : boxShadow;
   let outline;
   let outlineOffset;
   if (spacerWidth === null) {
@@ -630,7 +639,7 @@ const focusStyles = _ref => {
     outline = `${math(`${theme.shadowWidths[shadowWidth]} - ${theme.shadowWidths[spacerWidth]}`)} solid transparent`;
     outlineOffset = theme.shadowWidths[spacerWidth];
   }
-  return css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, boxShadow, styles);
+  return css(["&:focus{outline:none;}", "{outline:", ";outline-offset:", ";box-shadow:", ";", "}"], selector, outline, outlineOffset, _boxShadow, styles);
 };
 
 const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];

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

@@ -41,5 +41,5 @@ type FocusStylesParameters = FocusBoxShadowParameters & {
  * }
  * ```
  */
-export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
+export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
 export {};

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

@@ -7,10 +7,13 @@
 import { IGardenTheme } from '../types';
 import { Hue } from './getColor';
 export type FocusBoxShadowParameters = {
+    boxShadow?: string;
     inset?: boolean;
     hue?: Hue;
     shade?: number;
     shadowWidth?: 'sm' | 'md';
+    spacerHue?: Hue;
+    spacerShade?: number;
     spacerWidth?: null | 'xs' | 'sm';
     theme: IGardenTheme;
 };
@@ -18,14 +21,17 @@ export type FocusBoxShadowParameters = {
  * Get a CSS `box-shadow` property value for focus state styling. The `hue` and
  * `shade` are used to determine the color of the focus ring.
  *
+ * @param {string} [options.boxShadow] Provides an existing `box-shadow` (a drop shadow, for example) to be retained along with the focus ring
  * @param {boolean} [options.inset=false] Determines whether the `box-shadow` is inset
  * @param {string|Object} [options.hue='primaryHue'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
- * @param {number} [options.shade=600] Selects a shade for the given hue
+ * @param {number} [options.shade=600] Selects a shade for the given `hue`
  * @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow`
+ * @param {string|Object} [options.spacerHue='background'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
+ * @param {number} [options.spacerShade=600] Selects a shade for the given `spacerHue`
  * @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
  * @param {Object} options.theme Provides values used to resolve the desired color
  *
  * @returns A `box-shadow` property value for the given options. Default is a
  * 3px `blue[600]` ring with a 1px white spacer overlay.
  */
-export declare const getFocusBoxShadow: ({ inset, hue, shade, shadowWidth, spacerWidth, theme }: FocusBoxShadowParameters) => string;
+export declare const getFocusBoxShadow: ({ boxShadow, inset, hue, shade, shadowWidth, spacerHue, spacerShade, spacerWidth, theme }: FocusBoxShadowParameters) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "8.66.0",
+  "version": "8.67.0",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "40df9b49f68b69878186a66e9c14efb00eca051f"
+  "gitHead": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
 }