@zendeskgarden/react-theming 8.65.0 → 8.67.0

package/dist/index.cjs.js

@@ -12,10 +12,12 @@ var styledComponents = require('styled-components');
 var containerFocusvisible = require('@zendeskgarden/container-focusvisible');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var polished = require('polished');
+var memoize = require('lodash.memoize');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var memoize__default = /*#__PURE__*/_interopDefault(memoize);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -249,10 +251,12 @@ const palette = {
 };
 delete palette.product;
 const shadowWidths = {
+  xs: '1px',
   sm: '2px',
   md: '3px'
 };
 const shadows = {
+  xs: color => `0 0 0 ${shadowWidths.xs} ${color}`,
   sm: color => `0 0 0 ${shadowWidths.sm} ${color}`,
   md: color => `0 0 0 ${shadowWidths.md} ${color}`,
   lg: (offsetY, blurRadius, color) => `0 ${offsetY} ${blurRadius} 0 ${color}`
@@ -364,7 +368,7 @@ const adjust = (color, expected, actual) => {
   }
   return color;
 };
-function getColor(hue) {
+const getColor = memoize__default.default(function (hue) {
   let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
   let theme = arguments.length > 2 ? arguments[2] : undefined;
   let transparency = arguments.length > 3 ? arguments[3] : undefined;
@@ -398,7 +402,37 @@ function getColor(hue) {
     retVal = polished.rgba(retVal, transparency);
   }
   return retVal;
-}
+}, (hue, shade, theme, transparency) => JSON.stringify({
+  hue,
+  shade,
+  palette: theme?.palette,
+  colors: theme?.colors,
+  transparency
+}));
+
+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;
+  const color = getColor(hue, shade, theme);
+  const shadow = theme.shadows[shadowWidth](color);
+  if (spacerWidth === null) {
+    return `${inset ? 'inset' : ''} ${shadow}`;
+  }
+  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) {
   const [heightValue, heightUnit] = polished.getValueAndUnit(height.toString());
@@ -583,6 +617,38 @@ function menuStyles(position) {
   return styledComponents.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
 }
 
+const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]';
+const focusStyles = _ref => {
+  let {
+    condition = true,
+    selector = SELECTOR_FOCUS_VISIBLE,
+    shadowWidth = 'md',
+    spacerWidth = 'xs',
+    styles: {
+      boxShadow,
+      ...styles
+    } = {},
+    theme,
+    ...options
+  } = _ref;
+  const _boxShadow = condition ? getFocusBoxShadow({
+    boxShadow,
+    shadowWidth,
+    spacerWidth,
+    theme,
+    ...options
+  }) : boxShadow;
+  let outline;
+  let outlineOffset;
+  if (spacerWidth === null) {
+    outline = theme.shadowWidths[shadowWidth];
+  } else {
+    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);
+};
+
 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'];
 
@@ -590,10 +656,13 @@ exports.ARRAY_ARROW_POSITION = ARROW_POSITION;
 exports.ARRAY_MENU_POSITION = MENU_POSITION;
 exports.DEFAULT_THEME = DEFAULT_THEME;
 exports.PALETTE = PALETTE;
+exports.SELECTOR_FOCUS_VISIBLE = SELECTOR_FOCUS_VISIBLE;
 exports.ThemeProvider = ThemeProvider;
 exports.arrowStyles = arrowStyles;
+exports.focusStyles = focusStyles;
 exports.getColor = getColor;
 exports.getDocument = getDocument;
+exports.getFocusBoxShadow = getFocusBoxShadow;
 exports.getLineHeight = getLineHeight;
 exports.isRtl = isRtl;
 exports.mediaQuery = mediaQuery;

package/dist/index.esm.js

@@ -10,6 +10,7 @@ import { ThemeProvider as ThemeProvider$1, withTheme as withTheme$1, css, keyfra
 import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { rgba, darken, lighten, getValueAndUnit, math } from 'polished';
+import memoize from 'lodash.memoize';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -243,10 +244,12 @@ const palette = {
 };
 delete palette.product;
 const shadowWidths = {
+  xs: '1px',
   sm: '2px',
   md: '3px'
 };
 const shadows = {
+  xs: color => `0 0 0 ${shadowWidths.xs} ${color}`,
   sm: color => `0 0 0 ${shadowWidths.sm} ${color}`,
   md: color => `0 0 0 ${shadowWidths.md} ${color}`,
   lg: (offsetY, blurRadius, color) => `0 ${offsetY} ${blurRadius} 0 ${color}`
@@ -358,7 +361,7 @@ const adjust = (color, expected, actual) => {
   }
   return color;
 };
-function getColor(hue) {
+const getColor = memoize(function (hue) {
   let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
   let theme = arguments.length > 2 ? arguments[2] : undefined;
   let transparency = arguments.length > 3 ? arguments[3] : undefined;
@@ -392,7 +395,37 @@ function getColor(hue) {
     retVal = rgba(retVal, transparency);
   }
   return retVal;
-}
+}, (hue, shade, theme, transparency) => JSON.stringify({
+  hue,
+  shade,
+  palette: theme?.palette,
+  colors: theme?.colors,
+  transparency
+}));
+
+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;
+  const color = getColor(hue, shade, theme);
+  const shadow = theme.shadows[shadowWidth](color);
+  if (spacerWidth === null) {
+    return `${inset ? 'inset' : ''} ${shadow}`;
+  }
+  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) {
   const [heightValue, heightUnit] = getValueAndUnit(height.toString());
@@ -577,7 +610,39 @@ function menuStyles(position) {
   return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor('chromeHue', 600, theme, 0.15)), theme.colors.background, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
 }
 
+const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]';
+const focusStyles = _ref => {
+  let {
+    condition = true,
+    selector = SELECTOR_FOCUS_VISIBLE,
+    shadowWidth = 'md',
+    spacerWidth = 'xs',
+    styles: {
+      boxShadow,
+      ...styles
+    } = {},
+    theme,
+    ...options
+  } = _ref;
+  const _boxShadow = condition ? getFocusBoxShadow({
+    boxShadow,
+    shadowWidth,
+    spacerWidth,
+    theme,
+    ...options
+  }) : boxShadow;
+  let outline;
+  let outlineOffset;
+  if (spacerWidth === null) {
+    outline = theme.shadowWidths[shadowWidth];
+  } else {
+    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);
+};
+
 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'];
 
-export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, ThemeProvider, arrowStyles, getColor, getDocument, 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, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getColor, getDocument, getFocusBoxShadow, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, useWindow, withTheme };

package/dist/typings/index.d.ts

@@ -13,7 +13,8 @@ export { default as retrieveComponentStyles,
 default as retrieveTheme } from './utils/retrieveComponentStyles';
 export { default as withTheme } from './utils/withTheme';
 export { default as getDocument } from './utils/getDocument';
-export { default as getColor } from './utils/getColor';
+export { getColor } from './utils/getColor';
+export { getFocusBoxShadow } from './utils/getFocusBoxShadow';
 export { default as getLineHeight } from './utils/getLineHeight';
 export { default as mediaQuery } from './utils/mediaQuery';
 export { default as arrowStyles } from './utils/arrowStyles';
@@ -21,5 +22,6 @@ export { useDocument } from './utils/useDocument';
 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 } from './types';
 export type { IGardenTheme, IThemeProviderProps, ArrowPosition as ARROW_POSITION, MenuPosition as MENU_POSITION } from './types';

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

@@ -86,10 +86,12 @@ export interface IGardenTheme {
         xxxl: string;
     };
     shadowWidths: {
+        xs: string;
         sm: string;
         md: string;
     };
     shadows: {
+        xs: (color: string) => string;
         sm: (color: string) => string;
         md: (color: string) => string;
         lg: (offsetY: string, blurRadius: string, color: string) => string;

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

@@ -0,0 +1,45 @@
+/**
+ * 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 { CSSObject } from 'styled-components';
+import { FocusBoxShadowParameters } from './getFocusBoxShadow';
+export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible, &[data-garden-focus-visible=\"true\"]";
+type FocusStylesParameters = FocusBoxShadowParameters & {
+    condition?: boolean;
+    selector?: string;
+    styles?: CSSObject;
+};
+/**
+ * Garden standard `box-shadow` focus styling.
+ *
+ * @param {boolean} [options.condition=true] Supplies an optional condition that can be used to prevent the focus `box-shadow`
+ * @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 {string} [options.selector=SELECTOR_FOCUS_VISIBLE] Provides a subsitute `:focus-visible` pseudo-class CSS selector.
+ * @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} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
+ * @param {Object} [options.styles] Adds CSS property values to be rendered with `:focus-visible`
+ * @param {Object} options.theme Provides values used to resolve the desired color
+ *
+ * @returns CSS structured as follows, with `{values}` determined by the options provided:
+ * ```css
+ * :focus {
+ *   outline: none;
+ * }
+ *
+ * :focus-visible,
+ * [data-garden-focus-visible='true'] {
+ *   box-shadow: 0 0 0 {1px} #fff,
+ *               0 0 0 {3px} {blue};
+ *   outline: {2px} solid transparent;
+ *   outline-offset: {1px};
+ *   // additional {styles} here...
+ * }
+ * ```
+ */
+export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
+export {};

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

@@ -4,8 +4,10 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+/// <reference types="lodash" />
 import { DefaultTheme } from 'styled-components';
-type Hue = Record<number | string, string> | string;
+export type Hue = Record<number | string, string> | string;
+export declare const DEFAULT_SHADE = 600;
 /**
  * Get the palette color for the given hue, shade, and theme.
  *
@@ -19,8 +21,5 @@ type Hue = Record<number | string, string> | string;
  * @param {number} [shade=DEFAULT_SHADE] A hue shade.
  * @param {Object} theme Context `theme` object.
  * @param {Number} [transparency] An alpha-channel value between 0 and 1.
- *
- * @component
  */
-export default function getColor(hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number): string | undefined;
-export {};
+export declare const getColor: ((hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number) => string | undefined) & import("lodash").MemoizedFunction;

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

@@ -0,0 +1,37 @@
+/**
+ * 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 { 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;
+};
+/**
+ * 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 {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: ({ boxShadow, inset, hue, shade, shadowWidth, spacerHue, spacerShade, spacerWidth, theme }: FocusBoxShadowParameters) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "8.65.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>",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@zendeskgarden/container-focusvisible": "^1.0.0",
     "@zendeskgarden/container-utilities": "^1.0.0",
+    "lodash.memoize": "^4.1.2",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7"
   },
@@ -31,6 +32,9 @@
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
+  "devDependencies": {
+    "@types/lodash.memoize": "4.1.7"
+  },
   "keywords": [
     "components",
     "garden",
@@ -41,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "b702124a0055fdb7540f0d27b34ccbc9d552fc7a"
+  "gitHead": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
 }