@zendeskgarden/react-theming 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/utils/useText.js

@@ -0,0 +1,29 @@
+/**
+* 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 { useMemo } from 'react';
+
+const useText = function (component, props, name, text) {
+  let condition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  const value = condition ? props[name] : undefined;
+  return useMemo(() => {
+    if (condition) {
+      if (name === 'children') {
+        throw new Error('Error: `children` is not a valid `useText` prop.');
+      } else if (value === null || value === '') {
+        throw new Error(component.displayName ? `Error: you must provide a valid \`${name}\` text value for <${component.displayName}>.` : `Error: you must provide a valid \`${name}\` text value.`);
+      } else if (value === undefined) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(component.displayName ? `Warning: you did not provide a customized/translated \`${name}\` text value for <${component.displayName}>. Zendesk Garden is rendering <${component.displayName} ${name}="${text}"> by default.` : `Warning: you did not provide a customized/translated \`${name}\` text value. Zendesk Garden is rendering ${name}="${text}" by default.`);
+        }
+        return text;
+      }
+    }
+    return value;
+  }, [component.displayName, value, name, text, condition]);
+};
+
+export { useText };

package/dist/esm/utils/useWindow.js

@@ -0,0 +1,21 @@
+/**
+* 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 { useState, useEffect } from 'react';
+
+const useWindow = theme => {
+  const [controlledWindow, setControlledWindow] = useState();
+  useEffect(() => {
+    if (theme && theme.window) {
+      setControlledWindow(theme.window);
+    } else {
+      setControlledWindow(window);
+    }
+  }, [theme]);
+  return controlledWindow;
+};
+
+export { useWindow };

package/dist/index.cjs.js

@@ -1,16 +1,13 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
 var styledComponents = require('styled-components');
-var containerFocusvisible = require('@zendeskgarden/container-focusvisible');
-var containerUtilities = require('@zendeskgarden/container-utilities');
 var chromaJs = require('chroma-js');
 var polished = require('polished');
 var get = require('lodash.get');
@@ -22,21 +19,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var get__default = /*#__PURE__*/_interopDefault(get);
 var memoize__default = /*#__PURE__*/_interopDefault(memoize);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const PALETTE = {
   black: '#000',
   white: '#fff',
@@ -346,24 +328,84 @@ const colors = {
   variables: {
     dark: {
       background: {
-        default: 'neutralHue.1100'
+        default: 'neutralHue.1100',
+        raised: 'neutralHue.1000',
+        recessed: 'neutralHue.1200',
+        subtle: 'neutralHue.1000',
+        emphasis: 'neutralHue.600',
+        primary: 'primaryHue.900',
+        success: 'successHue.1000',
+        warning: 'warningHue.1000',
+        danger: 'dangerHue.1000',
+        primaryEmphasis: 'primaryHue.600',
+        successEmphasis: 'successHue.600',
+        warningEmphasis: 'warningHue.600',
+        dangerEmphasis: 'dangerHue.600'
       },
       border: {
-        default: 'neutralHue.700'
+        default: 'neutralHue.800',
+        emphasis: 'neutralHue.600',
+        subtle: 'neutralHue.900',
+        success: 'successHue.800',
+        warning: 'warningHue.800',
+        danger: 'dangerHue.800',
+        primaryEmphasis: 'primaryHue.600',
+        successEmphasis: 'successHue.600',
+        warningEmphasis: 'warningHue.600',
+        dangerEmphasis: 'dangerHue.600'
       },
       foreground: {
-        default: 'neutralHue.300'
+        default: 'neutralHue.300',
+        subtle: 'neutralHue.500',
+        onEmphasis: 'neutralHue.1100',
+        primary: 'primaryHue.600',
+        success: 'successHue.400',
+        warning: 'warningHue.400',
+        danger: 'dangerHue.400',
+        successEmphasis: 'successHue.300',
+        warningEmphasis: 'warningHue.300',
+        dangerEmphasis: 'dangerHue.300'
       }
     },
     light: {
       background: {
-        default: 'palette.white'
+        default: 'palette.white',
+        raised: 'palette.white',
+        recessed: 'neutralHue.100',
+        subtle: 'neutralHue.100',
+        emphasis: 'neutralHue.700',
+        primary: 'primaryHue.100',
+        success: 'successHue.100',
+        warning: 'warningHue.100',
+        danger: 'dangerHue.100',
+        primaryEmphasis: 'primaryHue.700',
+        successEmphasis: 'successHue.700',
+        warningEmphasis: 'warningHue.700',
+        dangerEmphasis: 'dangerHue.700'
       },
       border: {
-        default: 'neutralHue.400'
+        default: 'neutralHue.300',
+        emphasis: 'neutralHue.600',
+        subtle: 'neutralHue.200',
+        success: 'successHue.300',
+        warning: 'warningHue.300',
+        danger: 'dangerHue.300',
+        primaryEmphasis: 'primaryHue.700',
+        successEmphasis: 'successHue.700',
+        warningEmphasis: 'warningHue.700',
+        dangerEmphasis: 'dangerHue.700'
       },
       foreground: {
-        default: 'neutralHue.900'
+        default: 'neutralHue.900',
+        subtle: 'neutralHue.700',
+        onEmphasis: 'palette.white',
+        primary: 'primaryHue.700',
+        success: 'successHue.700',
+        warning: 'warningHue.700',
+        danger: 'dangerHue.700',
+        successEmphasis: 'successHue.900',
+        warningEmphasis: 'warningHue.900',
+        dangerEmphasis: 'dangerHue.900'
       }
     }
   }
@@ -453,37 +495,14 @@ const DEFAULT_THEME = {
   space
 };
 
-const useDocument = theme => {
-  const [controlledDocument, setControlledDocument] = React.useState();
-  React.useEffect(() => {
-    if (theme && theme.document) {
-      setControlledDocument(theme.document);
-    } else {
-      setControlledDocument(document);
-    }
-  }, [theme]);
-  return controlledDocument;
-};
-
 const ThemeProvider = _ref => {
   let {
     theme,
-    focusVisibleRef,
-    children,
     ...other
   } = _ref;
-  const scopeRef = React.useRef(null);
-  const relativeDocument = useDocument(theme);
-  const controlledScopeRef = focusVisibleRef === null ? React__default.default.createRef() : containerUtilities.getControlledValue(focusVisibleRef, scopeRef);
-  containerFocusvisible.useFocusVisible({
-    scope: controlledScopeRef,
-    relativeDocument
-  });
-  return React__default.default.createElement(styledComponents.ThemeProvider, _extends({
+  return React__default.default.createElement(styledComponents.ThemeProvider, Object.assign({
     theme: theme
-  }, other), focusVisibleRef === undefined ? React__default.default.createElement("div", {
-    ref: scopeRef
-  }, children) : children);
+  }, other));
 };
 ThemeProvider.defaultProps = {
   theme: DEFAULT_THEME
@@ -710,7 +729,7 @@ const toColor = (colors, palette, scheme, hue, shade, offset, transparency) => {
   }
   if (typeof _hue === 'object') {
     retVal = toHex(_hue, shade, offset, scheme);
-  } else if (chromaJs.valid(_hue)) {
+  } else if (_hue === 'transparent' || chromaJs.valid(_hue)) {
     if (shade === undefined) {
       retVal = _hue;
     } else {
@@ -920,22 +939,32 @@ const getFocusBoxShadow = _ref => {
   let {
     boxShadow,
     inset = false,
-    hue = 'primaryHue',
-    shade = DEFAULT_SHADE,
+    color = {
+      variable: 'border.primaryEmphasis'
+    },
     shadowWidth = 'md',
-    spacerHue = 'background',
-    spacerShade = DEFAULT_SHADE,
+    spacerColor = {
+      variable: 'background.default'
+    },
     spacerWidth = 'xs',
-    theme = DEFAULT_THEME
+    theme = DEFAULT_THEME,
+    ...args
   } = _ref;
-  const color = getColorV8(hue, shade, theme);
-  const shadow = theme.shadows[shadowWidth](color);
+  const _args = args;
+  const _color = _args.hue ? getColorV8(_args.hue, _args.shade, theme) : getColor({
+    ...color,
+    theme
+  });
+  const shadow = theme.shadows[shadowWidth](_color);
   if (spacerWidth === null) {
     return `${inset ? 'inset' : ''} ${shadow}`;
   }
-  const spacerColor = getColorV8(spacerHue, spacerShade, theme);
+  const _spacerColor = _args.spacerHue ? getColorV8(_args.spacerHue, _args.spacerShade, theme) : getColor({
+    ...spacerColor,
+    theme
+  });
   const retVal = `
-    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
+    ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](_spacerColor)},
     ${inset ? 'inset' : ''} ${shadow}`;
   return boxShadow ? `${retVal}, ${boxShadow}` : retVal;
 };
@@ -1057,6 +1086,18 @@ function arrowStyles(position) {
   return styledComponents.css(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
+const useDocument = theme => {
+  const [controlledDocument, setControlledDocument] = React.useState();
+  React.useEffect(() => {
+    if (theme && theme.document) {
+      setControlledDocument(theme.document);
+    } else {
+      setControlledDocument(document);
+    }
+  }, [theme]);
+  return controlledDocument;
+};
+
 const useWindow = theme => {
   const [controlledWindow, setControlledWindow] = React.useState();
   React.useEffect(() => {
@@ -1124,10 +1165,24 @@ function menuStyles(position) {
   } else {
     marginProperty = 'margin-right';
   }
-  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, getColorV8('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColorV8('chromeHue', 600, theme, 0.15)), getColorV8('background', 600 , theme), theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
+  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;color:", ";font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor({
+    theme,
+    variable: 'border.default'
+  }), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor({
+    theme,
+    hue: 'chromeHue',
+    shade: 600,
+    transparency: 0.15
+  })), getColor({
+    theme,
+    variable: 'background.raised'
+  }), theme.rtl ? 'right' : 'left', getColor({
+    theme,
+    variable: 'foreground.default'
+  }), 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 SELECTOR_FOCUS_VISIBLE = '&:focus-visible';
 const focusStyles = _ref => {
   let {
     condition = true,

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 { IGardenTheme, IThemeProviderProps } from '../types';
+import { IThemeProviderProps } from '../types';
 export declare const ThemeProvider: {
-    ({ theme, focusVisibleRef, children, ...other }: PropsWithChildren<IThemeProviderProps>): React.JSX.Element;
+    ({ theme, ...other }: PropsWithChildren<IThemeProviderProps>): React.JSX.Element;
     defaultProps: {
-        theme: IGardenTheme;
+        theme: import("../types").IGardenTheme;
     };
 };

package/dist/typings/index.d.ts

@@ -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, MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition, type MenuPosition, type Placement } from './types';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IGardenTheme, type IThemeProviderProps, type ArrowPosition, type ColorParameters, type FocusBoxShadowParameters, type FocusStylesParameters, type MenuPosition, type Placement } from './types';

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

@@ -4,14 +4,47 @@
  * 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="react" />
-import { ThemeProviderProps } from 'styled-components';
+import { CSSObject, 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"];
 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];
+export type ColorParameters = {
+    dark?: {
+        hue?: string;
+        offset?: number;
+        shade?: number;
+        transparency?: number;
+    };
+    hue?: string;
+    light?: {
+        hue?: string;
+        offset?: number;
+        shade?: number;
+        transparency?: number;
+    };
+    offset?: number;
+    shade?: number;
+    theme: IGardenTheme;
+    transparency?: number;
+    variable?: string;
+};
+export type FocusStylesParameters = FocusBoxShadowParameters & {
+    condition?: boolean;
+    selector?: string;
+    styles?: CSSObject;
+};
+export type FocusBoxShadowParameters = {
+    boxShadow?: string;
+    inset?: boolean;
+    color?: Omit<ColorParameters, 'theme'>;
+    shadowWidth?: 'sm' | 'md';
+    spacerColor?: Omit<ColorParameters, 'theme'>;
+    spacerWidth?: null | 'xs' | 'sm';
+    theme: IGardenTheme;
+};
 export type Hue = Record<number | string, string> | string;
 export interface IGardenTheme {
     rtl: boolean;
@@ -128,11 +161,4 @@ export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenT
      * for details.
      */
     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.
-     * Assigning `null` (on a nested `ThemeProvider`, for example) prevents the
-     * added polyfill and scoping `<div>`.
-     */
-    focusVisibleRef?: React.RefObject<HTMLElement> | null;
 }

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

@@ -4,14 +4,8 @@
  * 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;
-};
+import { FocusStylesParameters } from '../types';
+export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
 /**
  * Garden standard `box-shadow` focus styling.
  *
@@ -33,8 +27,7 @@ type FocusStylesParameters = FocusBoxShadowParameters & {
  *   outline: none;
  * }
  *
- * :focus-visible,
- * [data-garden-focus-visible='true'] {
+ * :focus-visible {
  *   box-shadow: 0 0 0 {1px} #fff,
  *               0 0 0 {3px} {blue};
  *   outline: {2px} solid transparent;
@@ -44,4 +37,3 @@ type FocusStylesParameters = FocusBoxShadowParameters & {
  * ```
  */
 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

@@ -5,27 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="lodash" />
-import { IGardenTheme } from '../types';
-type ColorParameters = {
-    dark?: {
-        hue?: string;
-        offset?: number;
-        shade?: number;
-        transparency?: number;
-    };
-    hue?: string;
-    light?: {
-        hue?: string;
-        offset?: number;
-        shade?: number;
-        transparency?: number;
-    };
-    offset?: number;
-    shade?: number;
-    theme: IGardenTheme;
-    transparency?: number;
-    variable?: string;
-};
+import { ColorParameters } from '../types';
 /**
  * Get a color value from the theme. Variable lookup takes precedence, followed
  * by `dark` and `light` object values. If none of these are provided, `hue`,
@@ -48,4 +28,3 @@ type ColorParameters = {
  * @param {number} [options.transparency] An alpha-channel value between 0 and 1
  */
 export declare const getColor: (({ dark, hue, light, offset, shade, theme, transparency, variable }: ColorParameters) => string) & import("lodash").MemoizedFunction;
-export {};

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

@@ -4,33 +4,19 @@
  * 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 { Hue, IGardenTheme } from '../types';
-export type FocusBoxShadowParameters = {
-    boxShadow?: string;
-    inset?: boolean;
-    hue?: Hue;
-    shade?: number;
-    shadowWidth?: 'sm' | 'md';
-    spacerHue?: Hue;
-    spacerShade?: number;
-    spacerWidth?: null | 'xs' | 'sm';
-    theme: IGardenTheme;
-};
+import { FocusBoxShadowParameters } from '../types';
 /**
- * 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.
+ * Get a CSS `box-shadow` property value for focus state styling.
  *
  * @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 {Object} [options.color={ variable: 'border.primaryEmphasis' }] Provides an object with `getColor` parameters used to determine the focus ring color
  * @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 {Object} [options.spacerColor={ variable: 'background.default' }] Provides an object with `getColor` parameters used to determine the spacer color
  * @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.
+ * 3px blue ring with a 1px spacer overlay that matches the background.
  */
-export declare const getFocusBoxShadow: ({ boxShadow, inset, hue, shade, shadowWidth, spacerHue, spacerShade, spacerWidth, theme }: FocusBoxShadowParameters) => string;
+export declare const getFocusBoxShadow: ({ boxShadow, inset, color, shadowWidth, spacerColor, spacerWidth, theme, ...args }: FocusBoxShadowParameters) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.6",
+  "version": "9.0.0-next.8",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -22,8 +22,6 @@
   "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",
     "chroma-js": "^2.4.2",
     "lodash.get": "^4.4.2",
     "lodash.memoize": "^4.1.2",
@@ -50,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
+  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
 }