@zendeskgarden/react-grid 8.66.0 → 8.68.0

package/dist/index.cjs.js

@@ -103,7 +103,7 @@ const sizeStyles$4 = props => {
 };
 const StyledCol = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -125,7 +125,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGrid = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -167,7 +167,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRow = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -180,7 +180,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -192,7 +192,7 @@ StyledPane.defaultProps = {
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -206,8 +206,14 @@ const colorStyles$1 = props => {
   const color = reactTheming.getColor('neutralHue', 300, props.theme);
   const hoverColor = reactTheming.getColor('primaryHue', 600, props.theme);
   const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
-  const boxShadow = props.theme.shadows.md(polished.rgba(hoverColor, 0.35));
-  return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";background-color:", ";}&:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, boxShadow, hoverColor, props.isHovered && activeColor);
+  return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, reactTheming.focusStyles({
+    theme: props.theme,
+    hue: hoverColor,
+    styles: {
+      backgroundColor: hoverColor
+    },
+    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before'
+  }), props.isHovered && activeColor);
 };
 const sizeStyles$1 = props => {
   const size = polished.math(`${props.theme.shadowWidths.md} * 2`);
@@ -268,15 +274,15 @@ const sizeStyles$1 = props => {
       break;
   }
   const dimensionProperty = width === '100%' ? 'height' : 'width';
-  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
+  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before,&[data-garden-focus-visible]::before{", ":", ";}&:focus-visible::before,&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledPaneSplitter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -301,8 +307,10 @@ const colorStyles = _ref => {
     theme
   } = _ref;
   const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
-  const focusBoxShadow = theme.shadows.md(reactTheming.getColor('primaryHue', 600, theme, 0.35));
-  return styled.css(["box-shadow:", ";&[data-garden-focus-visible]{box-shadow:", ",", ";}"], boxShadow, focusBoxShadow, boxShadow);
+  return styled.css(["box-shadow:", ";", ""], boxShadow, reactTheming.focusStyles({
+    theme,
+    boxShadow
+  }));
 };
 const sizeStyles = props => {
   const size = `${props.theme.space.base * 6}px`;
@@ -335,14 +343,14 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["position:absolute;transition:background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, colorStyles, props => props.theme.colors.background, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => props.theme.colors.background, colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledPaneSplitterButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };

package/dist/index.esm.js

@@ -8,8 +8,8 @@
 import React, { createContext, useContext, useMemo, useState, useCallback, forwardRef, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
-import { math, rgba, stripUnit } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, useDocument, useText } from '@zendeskgarden/react-theming';
+import { math, stripUnit } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument, useText } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 import { useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
 import useResizeObserver from 'use-resize-observer';
@@ -93,7 +93,7 @@ const sizeStyles$4 = props => {
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -115,7 +115,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -157,7 +157,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -170,7 +170,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -182,7 +182,7 @@ StyledPane.defaultProps = {
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -196,8 +196,14 @@ const colorStyles$1 = props => {
   const color = getColor('neutralHue', 300, props.theme);
   const hoverColor = getColor('primaryHue', 600, props.theme);
   const activeColor = getColor('primaryHue', 800, props.theme);
-  const boxShadow = props.theme.shadows.md(rgba(hoverColor, 0.35));
-  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";background-color:", ";}&:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, boxShadow, hoverColor, props.isHovered && activeColor);
+  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, focusStyles({
+    theme: props.theme,
+    hue: hoverColor,
+    styles: {
+      backgroundColor: hoverColor
+    },
+    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before'
+  }), props.isHovered && activeColor);
 };
 const sizeStyles$1 = props => {
   const size = math(`${props.theme.shadowWidths.md} * 2`);
@@ -258,15 +264,15 @@ const sizeStyles$1 = props => {
       break;
   }
   const dimensionProperty = width === '100%' ? 'height' : 'width';
-  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
+  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before,&[data-garden-focus-visible]::before{", ":", ";}&:focus-visible::before,&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.66.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledPaneSplitter.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -291,8 +297,10 @@ const colorStyles = _ref => {
     theme
   } = _ref;
   const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor('chromeHue', 600, theme, 0.15));
-  const focusBoxShadow = theme.shadows.md(getColor('primaryHue', 600, theme, 0.35));
-  return css(["box-shadow:", ";&[data-garden-focus-visible]{box-shadow:", ",", ";}"], boxShadow, focusBoxShadow, boxShadow);
+  return css(["box-shadow:", ";", ""], boxShadow, focusStyles({
+    theme,
+    boxShadow
+  }));
 };
 const sizeStyles = props => {
   const size = `${props.theme.space.base * 6}px`;
@@ -325,14 +333,14 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.66.0',
+  'data-garden-version': '8.68.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["position:absolute;transition:background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, colorStyles, props => props.theme.colors.background, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => props.theme.colors.background, colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, SELECTOR_FOCUS_VISIBLE, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledPaneSplitterButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/typings/elements/pane/PaneProvider.d.ts

@@ -4,10 +4,11 @@
  * 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 React from 'react';
 import PropTypes from 'prop-types';
 import { IPaneProviderProps } from '../../types';
 export declare const PaneProvider: {
-    ({ id, totalPanesWidth, totalPanesHeight, defaultRowValues, defaultColumnValues, rowValues, columnValues, onChange, children }: IPaneProviderProps): JSX.Element;
+    ({ id, totalPanesWidth, totalPanesHeight, defaultRowValues, defaultColumnValues, rowValues, columnValues, onChange, children }: IPaneProviderProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         id: PropTypes.Requireable<string>;

package/dist/typings/styled/pane/StyledPaneSplitter.d.ts

@@ -14,6 +14,7 @@ interface IStyledPaneSplitterProps {
 /**
  * 1. Elevated initial context to pickup full-width hover
  * 2. Stack below splitter button.
+ * 3. Stack above other splitters when focused
  */
 export declare const StyledPaneSplitter: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.66.0",
+  "version": "8.68.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,21 +23,21 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.3",
     "@zendeskgarden/container-utilities": "^1.0.0",
-    "@zendeskgarden/react-buttons": "^8.66.0",
-    "@zendeskgarden/react-tooltips": "^8.66.0",
+    "@zendeskgarden/react-buttons": "^8.68.0",
+    "@zendeskgarden/react-tooltips": "^8.68.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0",
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.66.0"
+    "@zendeskgarden/react-theming": "^8.68.0"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "40df9b49f68b69878186a66e9c14efb00eca051f"
+  "gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
 }