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

package/dist/index.cjs.js

@@ -9,8 +9,6 @@
 
 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');
@@ -453,37 +451,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({
     theme: theme
-  }, other), focusVisibleRef === undefined ? React__default.default.createElement("div", {
-    ref: scopeRef
-  }, children) : children);
+  }, other));
 };
 ThemeProvider.defaultProps = {
   theme: DEFAULT_THEME
@@ -1057,6 +1032,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(() => {
@@ -1127,7 +1114,7 @@ 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, 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));
 }
 
-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/index.esm.js

@@ -5,10 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
-import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { valid, scale } from 'chroma-js';
 import { rgba, darken, lighten, getValueAndUnit, math } from 'polished';
 import get from 'lodash.get';
@@ -445,37 +443,14 @@ const DEFAULT_THEME = {
   space
 };
 
-const useDocument = theme => {
-  const [controlledDocument, setControlledDocument] = useState();
-  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 = useRef(null);
-  const relativeDocument = useDocument(theme);
-  const controlledScopeRef = focusVisibleRef === null ? React.createRef() : getControlledValue(focusVisibleRef, scopeRef);
-  useFocusVisible({
-    scope: controlledScopeRef,
-    relativeDocument
-  });
   return React.createElement(ThemeProvider$1, _extends({
     theme: theme
-  }, other), focusVisibleRef === undefined ? React.createElement("div", {
-    ref: scopeRef
-  }, children) : children);
+  }, other));
 };
 ThemeProvider.defaultProps = {
   theme: DEFAULT_THEME
@@ -1049,6 +1024,18 @@ function arrowStyles(position) {
   return 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] = useState();
+  useEffect(() => {
+    if (theme && theme.document) {
+      setControlledDocument(theme.document);
+    } else {
+      setControlledDocument(document);
+    }
+  }, [theme]);
+  return controlledDocument;
+};
+
 const useWindow = theme => {
   const [controlledWindow, setControlledWindow] = useState();
   useEffect(() => {
@@ -1119,7 +1106,7 @@ 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, 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));
 }
 
-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/types/index.d.ts

@@ -4,7 +4,6 @@
  * 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';
 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];
@@ -128,11 +127,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

@@ -6,7 +6,7 @@
  */
 import { CSSObject } from 'styled-components';
 import { FocusBoxShadowParameters } from './getFocusBoxShadow';
-export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible, &[data-garden-focus-visible=\"true\"]";
+export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
 type FocusStylesParameters = FocusBoxShadowParameters & {
     condition?: boolean;
     selector?: string;
@@ -33,8 +33,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.6",
+  "version": "9.0.0-next.7",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -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": "50a2b45b2e237a490a6d460818d33498b92479ec"
 }