@zendeskgarden/react-grid 8.53.2 → 8.54.1

package/dist/index.cjs.js

@@ -242,7 +242,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 };
 var StyledCol = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -282,7 +282,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledGrid = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -332,7 +332,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledRow = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -363,7 +363,7 @@ StyledRow.defaultProps = {
 var COMPONENT_ID$3 = 'pane';
 var StyledPane = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -377,7 +377,7 @@ StyledPane.defaultProps = {
 var COMPONENT_ID$2 = 'pane.content';
 var StyledPaneContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -418,19 +418,6 @@ var sizeStyles$1 = function sizeStyles(props) {
       separatorWidth = width;
       separatorHeight = props.theme.borderWidths.sm;
       break;
-    case 'end':
-      cursor = 'col-resize';
-      top = 0;
-      width = size;
-      height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
-      separatorHeight = height;
-      if (props.theme.rtl) {
-        left = offset;
-      } else {
-        right = offset;
-      }
-      break;
     case 'bottom':
       cursor = 'row-resize';
       bottom = offset;
@@ -452,13 +439,27 @@ var sizeStyles$1 = function sizeStyles(props) {
         left = offset;
       }
       break;
+    case 'end':
+    default:
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = props.theme.borderWidths.sm;
+      separatorHeight = height;
+      if (props.theme.rtl) {
+        left = offset;
+      } else {
+        right = offset;
+      }
+      break;
   }
   var 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, cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 var StyledPaneSplitter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -521,7 +522,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledPaneSplitterButton = styled__default["default"](reactButtons.ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.2',
+  'data-garden-version': '8.54.1',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -889,17 +890,11 @@ var usePaneSplitterContext = function usePaneSplitterContext() {
 };
 
 var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
-var orientationToPosition = {
-  start: containerSplitter.SplitterPosition.LEADS,
-  end: containerSplitter.SplitterPosition.TRAILS,
-  top: containerSplitter.SplitterPosition.LEADS,
-  bottom: containerSplitter.SplitterPosition.TRAILS
-};
 var paneToSplitterOrientation = {
-  start: containerSplitter.SplitterOrientation.VERTICAL,
-  end: containerSplitter.SplitterOrientation.VERTICAL,
-  top: containerSplitter.SplitterOrientation.HORIZONTAL,
-  bottom: containerSplitter.SplitterOrientation.HORIZONTAL
+  start: 'vertical',
+  end: 'vertical',
+  top: 'horizontal',
+  bottom: 'horizontal'
 };
 var orientationToDimension = {
   start: 'columns',
@@ -908,7 +903,7 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = React.forwardRef(function (_ref, ref) {
-  var _separatorProps$ref$c, _separatorProps$ref$c2;
+  var _separatorRef$current, _separatorRef$current2;
   var providerId = _ref.providerId,
       layoutKey = _ref.layoutKey,
       min = _ref.min,
@@ -918,31 +913,32 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
   var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = React.useContext(styled.ThemeContext);
+  var environment = reactTheming.useDocument(themeContext);
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isHovered = _useState2[0],
       setIsHovered = _useState2[1];
-  var position = orientationToPosition[orientation];
   var isRow = orientationToDimension[orientation] === 'rows';
-  var splitterOrientation = paneToSplitterOrientation[orientation];
+  var separatorRef = React.useRef(null);
+  var splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
   var pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
   var value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
   var valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
   var _useSplitter = containerSplitter.useSplitter({
-    type: containerSplitter.SplitterType.VARIABLE,
     orientation: splitterOrientation,
-    position: position,
+    isLeading: orientation === 'start' || orientation === 'top',
     min: min * pixelsPerFr,
     max: max * pixelsPerFr,
     rtl: themeContext.rtl,
-    environment: window,
+    environment: environment,
     onChange: function onChange(valueNow) {
       if (isRow) {
         return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
       return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: value
+    valueNow: value,
+    separatorRef: separatorRef
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
@@ -951,15 +947,17 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
       paneContext.setId(getPrimaryPaneProps().id);
     }
   }, [paneContext, getPrimaryPaneProps]);
+  var ariaLabel = reactTheming.useText(SplitterComponent, props, 'aria-label', "".concat(splitterOrientation, " splitter"));
   var separatorProps = getSeparatorProps({
-    'aria-controls': paneContext.id
+    'aria-controls': paneContext.id,
+    'aria-label': ariaLabel
   });
-  var size = isRow ? (_separatorProps$ref$c = separatorProps.ref.current) === null || _separatorProps$ref$c === void 0 ? void 0 : _separatorProps$ref$c.clientWidth : (_separatorProps$ref$c2 = separatorProps.ref.current) === null || _separatorProps$ref$c2 === void 0 ? void 0 : _separatorProps$ref$c2.clientHeight;
+  var size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
   var onMouseOver = React.useMemo(function () {
     return containerUtilities.composeEventHandlers(props.onMouseOver, function (event) {
-      return setIsHovered(event.target === separatorProps.ref.current);
+      return setIsHovered(event.target === separatorRef.current);
     });
-  }, [props.onMouseOver, separatorProps.ref]);
+  }, [props.onMouseOver, separatorRef]);
   return React__default["default"].createElement(PaneSplitterContext.Provider, {
     value: React.useMemo(function () {
       return {
@@ -977,7 +975,7 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
     orientation: orientation
   }, separatorProps, props, {
     onMouseOver: onMouseOver,
-    ref: mergeRefs__default["default"]([separatorProps.ref, ref])
+    ref: mergeRefs__default["default"]([separatorRef, ref])
   })));
 });
 SplitterComponent.displayName = 'Pane.Splitter';

package/dist/index.esm.js

@@ -5,15 +5,15 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { createContext, useContext, useMemo, useState, useCallback, forwardRef, useEffect } from 'react';
+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 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, useDocument, useText } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 import { useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
 import mergeRefs from 'react-merge-refs';
-import { SplitterPosition, SplitterOrientation, useSplitter, SplitterType } from '@zendeskgarden/container-splitter';
+import { useSplitter } from '@zendeskgarden/container-splitter';
 import { Tooltip } from '@zendeskgarden/react-tooltips';
 
 function ownKeys(object, enumerableOnly) {
@@ -231,7 +231,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 };
 var StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -271,7 +271,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -321,7 +321,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -352,7 +352,7 @@ StyledRow.defaultProps = {
 var COMPONENT_ID$3 = 'pane';
 var StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -366,7 +366,7 @@ StyledPane.defaultProps = {
 var COMPONENT_ID$2 = 'pane.content';
 var StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -407,19 +407,6 @@ var sizeStyles$1 = function sizeStyles(props) {
       separatorWidth = width;
       separatorHeight = props.theme.borderWidths.sm;
       break;
-    case 'end':
-      cursor = 'col-resize';
-      top = 0;
-      width = size;
-      height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
-      separatorHeight = height;
-      if (props.theme.rtl) {
-        left = offset;
-      } else {
-        right = offset;
-      }
-      break;
     case 'bottom':
       cursor = 'row-resize';
       bottom = offset;
@@ -441,13 +428,27 @@ var sizeStyles$1 = function sizeStyles(props) {
         left = offset;
       }
       break;
+    case 'end':
+    default:
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = props.theme.borderWidths.sm;
+      separatorHeight = height;
+      if (props.theme.rtl) {
+        left = offset;
+      } else {
+        right = offset;
+      }
+      break;
   }
   var 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, cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 var StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.2'
+  'data-garden-version': '8.54.1'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -510,7 +511,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledPaneSplitterButton = styled(ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.2',
+  'data-garden-version': '8.54.1',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -878,17 +879,11 @@ var usePaneSplitterContext = function usePaneSplitterContext() {
 };
 
 var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
-var orientationToPosition = {
-  start: SplitterPosition.LEADS,
-  end: SplitterPosition.TRAILS,
-  top: SplitterPosition.LEADS,
-  bottom: SplitterPosition.TRAILS
-};
 var paneToSplitterOrientation = {
-  start: SplitterOrientation.VERTICAL,
-  end: SplitterOrientation.VERTICAL,
-  top: SplitterOrientation.HORIZONTAL,
-  bottom: SplitterOrientation.HORIZONTAL
+  start: 'vertical',
+  end: 'vertical',
+  top: 'horizontal',
+  bottom: 'horizontal'
 };
 var orientationToDimension = {
   start: 'columns',
@@ -897,7 +892,7 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = forwardRef(function (_ref, ref) {
-  var _separatorProps$ref$c, _separatorProps$ref$c2;
+  var _separatorRef$current, _separatorRef$current2;
   var providerId = _ref.providerId,
       layoutKey = _ref.layoutKey,
       min = _ref.min,
@@ -907,31 +902,32 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
   var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = useContext(ThemeContext);
+  var environment = useDocument(themeContext);
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isHovered = _useState2[0],
       setIsHovered = _useState2[1];
-  var position = orientationToPosition[orientation];
   var isRow = orientationToDimension[orientation] === 'rows';
-  var splitterOrientation = paneToSplitterOrientation[orientation];
+  var separatorRef = useRef(null);
+  var splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
   var pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
   var value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
   var valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
   var _useSplitter = useSplitter({
-    type: SplitterType.VARIABLE,
     orientation: splitterOrientation,
-    position: position,
+    isLeading: orientation === 'start' || orientation === 'top',
     min: min * pixelsPerFr,
     max: max * pixelsPerFr,
     rtl: themeContext.rtl,
-    environment: window,
+    environment: environment,
     onChange: function onChange(valueNow) {
       if (isRow) {
         return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
       return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: value
+    valueNow: value,
+    separatorRef: separatorRef
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
@@ -940,15 +936,17 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
       paneContext.setId(getPrimaryPaneProps().id);
     }
   }, [paneContext, getPrimaryPaneProps]);
+  var ariaLabel = useText(SplitterComponent, props, 'aria-label', "".concat(splitterOrientation, " splitter"));
   var separatorProps = getSeparatorProps({
-    'aria-controls': paneContext.id
+    'aria-controls': paneContext.id,
+    'aria-label': ariaLabel
   });
-  var size = isRow ? (_separatorProps$ref$c = separatorProps.ref.current) === null || _separatorProps$ref$c === void 0 ? void 0 : _separatorProps$ref$c.clientWidth : (_separatorProps$ref$c2 = separatorProps.ref.current) === null || _separatorProps$ref$c2 === void 0 ? void 0 : _separatorProps$ref$c2.clientHeight;
+  var size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
   var onMouseOver = useMemo(function () {
     return composeEventHandlers(props.onMouseOver, function (event) {
-      return setIsHovered(event.target === separatorProps.ref.current);
+      return setIsHovered(event.target === separatorRef.current);
     });
-  }, [props.onMouseOver, separatorProps.ref]);
+  }, [props.onMouseOver, separatorRef]);
   return React.createElement(PaneSplitterContext.Provider, {
     value: useMemo(function () {
       return {
@@ -966,7 +964,7 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
     orientation: orientation
   }, separatorProps, props, {
     onMouseOver: onMouseOver,
-    ref: mergeRefs([separatorProps.ref, ref])
+    ref: mergeRefs([separatorRef, ref])
   })));
 });
 SplitterComponent.displayName = 'Pane.Splitter';

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

@@ -8,7 +8,7 @@ import { DefaultTheme } from 'styled-components';
 import { Orientation } from '../../types';
 interface IStyledPaneSplitterProps {
     isHovered: boolean;
-    orientation: Orientation;
+    orientation?: Orientation;
 }
 /**
  * 1. Elevated initial context to pickup full-width hover

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.53.2",
+  "version": "8.54.1",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,10 +21,10 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-splitter": "^0.2.3",
-    "@zendeskgarden/container-utilities": "^0.7.1",
-    "@zendeskgarden/react-buttons": "^8.53.2",
-    "@zendeskgarden/react-tooltips": "^8.53.2",
+    "@zendeskgarden/container-splitter": "^2.0.0",
+    "@zendeskgarden/container-utilities": "^1.0.0",
+    "@zendeskgarden/react-buttons": "^8.54.1",
+    "@zendeskgarden/react-tooltips": "^8.54.1",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0"
@@ -36,7 +36,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.53.2",
+    "@zendeskgarden/react-theming": "^8.54.1",
     "use-resize-observer": "9.0.0"
   },
   "keywords": [
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "b4ef84eb8f6606659aee9e689b8b44cb1feb0b87"
+  "gitHead": "fdf531c082579941617f674871067bfde1e5abb6"
 }