@zendeskgarden/react-grid 8.52.0 → 8.53.2

package/README.md

@@ -84,11 +84,15 @@ import { PaneProvider, Pane } from '@zendeskgarden/react-grid';
         </Pane>
         <Pane>
           <Pane.Content>Pane 2</Pane.Content>
-          <Pane.Splitter layoutKey="row-1" min={0} max={2} orientation="bottom" />
+          <Pane.Splitter layoutKey="row-1" min={0} max={2} orientation="bottom">
+            <Pane.SplitterButton label="toggle row-1" />
+          </Pane.Splitter>
         </Pane>
         <Pane>
           <Pane.Content>Pane 3</Pane.Content>
-          <Pane.Splitter layoutKey="row-2" min={0} max={2} orientation="top" />
+          <Pane.Splitter layoutKey="row-2" min={0} max={2} orientation="top">
+            <Pane.SplitterButton label="toggle row-2" placement="end" />
+          </Pane.Splitter>
         </Pane>
         <Pane>
           <Pane.Content>Pane 4</Pane.Content>

package/dist/index.cjs.js

@@ -14,9 +14,11 @@ var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var polished = require('polished');
 var reactTheming = require('@zendeskgarden/react-theming');
+var reactButtons = require('@zendeskgarden/react-buttons');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var mergeRefs = require('react-merge-refs');
 var containerSplitter = require('@zendeskgarden/container-splitter');
+var reactTooltips = require('@zendeskgarden/react-tooltips');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -188,8 +190,8 @@ var SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 var WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 var ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
-var COMPONENT_ID$5 = 'grid.col';
-var colorStyles$3 = function colorStyles(props) {
+var COMPONENT_ID$6 = 'grid.col';
+var colorStyles$4 = function colorStyles(props) {
   var backgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
@@ -234,22 +236,22 @@ var flexStyles$1 = function flexStyles(size, alignSelf, textAlign, offset, order
 var mediaStyles$1 = function mediaStyles(minWidth, size, alignSelf, textAlign, offset, order, props) {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles$1(size, alignSelf, textAlign, offset, order, props));
 };
-var sizeStyles$3 = function sizeStyles(props) {
+var sizeStyles$4 = function sizeStyles(props) {
   var padding = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledCol = styled__default["default"].div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
 })(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], function (props) {
   return flexStyles$1(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props);
 }, function (props) {
-  return sizeStyles$3(props);
+  return sizeStyles$4(props);
 }, function (props) {
-  return props.debug && colorStyles$3(props);
+  return props.debug && colorStyles$4(props);
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props);
 }, function (props) {
@@ -261,45 +263,45 @@ var StyledCol = styled__default["default"].div.attrs({
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
 });
 StyledCol.defaultProps = {
   columns: 12,
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'grid.grid';
-var colorStyles$2 = function colorStyles(props) {
+var COMPONENT_ID$5 = 'grid.grid';
+var colorStyles$3 = function colorStyles(props) {
   var borderColor = reactTheming.getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
   var borderWidth = polished.math("".concat(props.theme.borderWidths.sm, " * 2"));
   return styled.css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
-var sizeStyles$2 = function sizeStyles(props) {
+var sizeStyles$3 = function sizeStyles(props) {
   var padding = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledGrid = styled__default["default"].div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
 })(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
-  return sizeStyles$2(props);
+  return sizeStyles$3(props);
 }, function (props) {
-  return props.debug && colorStyles$2(props);
+  return props.debug && colorStyles$3(props);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
 });
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'grid.row';
-var colorStyles$1 = function colorStyles(props) {
+var COMPONENT_ID$4 = 'grid.row';
+var colorStyles$2 = function colorStyles(props) {
   var borderColor = reactTheming.getColor(props.theme.palette.mint, 600, props.theme, 0.5);
   var borderWidth = props.theme.borderWidths.sm;
   return styled.css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -324,22 +326,22 @@ var flexStyles = function flexStyles(alignItems, justifyContent, wrap) {
 var mediaStyles = function mediaStyles(minWidth, alignItems, justifyContent, wrap) {
   return styled.css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-var sizeStyles$1 = function sizeStyles(props) {
+var sizeStyles$2 = function sizeStyles(props) {
   var margin = props.gutters ? polished.math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 var StyledRow = styled__default["default"].div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
 })(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], function (props) {
   return flexStyles(props.alignItems, props.justifyContent, props.wrapAll);
 }, function (props) {
-  return sizeStyles$1(props);
+  return sizeStyles$2(props);
 }, function (props) {
-  return props.debug && colorStyles$1(props);
+  return props.debug && colorStyles$2(props);
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs);
 }, function (props) {
@@ -351,51 +353,52 @@ var StyledRow = styled__default["default"].div.attrs({
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl);
 }, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
 });
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'pane';
+var COMPONENT_ID$3 = 'pane';
 var StyledPane = styled__default["default"].div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
 })(["position:relative;min-width:0;min-height:0;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
 });
 StyledPane.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'pane.content';
+var COMPONENT_ID$2 = 'pane.content';
 var StyledPaneContent = styled__default["default"].div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
 })(["height:100%;overflow:auto;", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
 });
 StyledPaneContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'pane.splitter';
-var colorStyles = function colorStyles(props) {
+var COMPONENT_ID$1 = 'pane.splitter';
+var colorStyles$1 = function colorStyles(props) {
   var color = reactTheming.getColor('neutralHue', 300, props.theme);
   var hoverColor = reactTheming.getColor('primaryHue', 600, props.theme);
   var activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
   var boxShadow = props.theme.shadows.md(polished.rgba(hoverColor, 0.35));
-  return styled.css(["&::before{background-color:", ";}&:hover::before,&[data-garden-focus-visible]::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";}&:active::before{background-color:", ";}"], color, hoverColor, boxShadow, activeColor);
+  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);
 };
-var sizeStyles = function sizeStyles(props) {
+var sizeStyles$1 = function sizeStyles(props) {
   var size = polished.math("".concat(props.theme.shadowWidths.md, " * 2"));
+  var separatorSize = polished.math("".concat(props.theme.borderWidths.sm, " * 2"));
   var offset = polished.math("-".concat(size, " / 2"));
   var cursor;
   var top;
@@ -450,21 +453,90 @@ var sizeStyles = function sizeStyles(props) {
       }
       break;
   }
-  return styled.css(["display:flex;top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,width 0.25s ease-in-out,height 0.25s ease-in-out;margin:auto;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, width === '100%' ? 'height' : 'width', polished.math("".concat(props.theme.borderWidths.sm, " * 2")), props.theme.borderRadii.md);
+  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,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["position:absolute;z-index:1;user-select:none;", ";&:hover,&[data-garden-focus-visible]{z-index:2;}&:focus{outline:none;}&::before{display:block;content:'';}", ";", ";"], sizeStyles, colorStyles, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
+})(["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, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
 });
 StyledPaneSplitter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+var COMPONENT_ID = 'pane.splitter_button';
+var transformStyles = function transformStyles(props) {
+  var degrees = 0;
+  if (props.isRotated) {
+    degrees = props.theme.rtl ? -180 : 180;
+  }
+  if (props.orientation === 'end') {
+    degrees += props.theme.rtl ? -90 : 90;
+  } else if (props.orientation === 'start') {
+    degrees += props.theme.rtl ? 90 : -90;
+  } else if (props.orientation === 'bottom') {
+    degrees += 180;
+  }
+  return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
+};
+var colorStyles = function colorStyles(_ref) {
+  var theme = _ref.theme;
+  var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), reactTheming.getColor('chromeHue', 600, theme, 0.15));
+  var 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);
+};
+var sizeStyles = function sizeStyles(props) {
+  var size = "".concat(props.theme.space.base * 6, "px");
+  var display = props.splitterSize <= polished.stripUnit(polished.math("".concat(props.theme.shadowWidths.md, " * 2 + ").concat(size))) && 'none';
+  var isVertical = props.orientation === 'start' || props.orientation === 'end';
+  var top;
+  var left;
+  var right;
+  var bottom;
+  if (props.splitterSize >= polished.stripUnit(polished.math("".concat(size, " * 3")))) {
+    if (props.placement === 'start') {
+      if (isVertical) {
+        top = size;
+      } else if (props.theme.rtl) {
+        right = size;
+      } else {
+        left = size;
+      }
+    } else if (props.placement === 'end') {
+      if (isVertical) {
+        bottom = size;
+      } else if (props.theme.rtl) {
+        left = size;
+      } else {
+        right = size;
+      }
+    }
+  }
+  return styled.css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
+};
+var StyledPaneSplitterButton = styled__default["default"](reactButtons.ChevronButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.53.2',
+  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, function (props) {
+  return props.theme.colors.background;
+}, function (props) {
+  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
+});
+StyledPaneSplitterButton.defaultProps = {
+  theme: reactTheming.DEFAULT_THEME
+};
+
 var GridContext = React.createContext({
   gutters: 'md'
 });
@@ -704,8 +776,8 @@ var PaneProvider = function PaneProvider(_ref3) {
   var setColumnValue = React.useCallback(function (isStart, splitterId, value) {
     var columns = layoutIndices.columns,
         columnArray = layoutIndices.columnArray;
-    var stealFromTraversal = isStart ? 0 : 1;
-    var addToTraversal = isStart ? -1 : 0;
+    var stealFromTraversal = isStart ? -1 : 1;
+    var addToTraversal = 0;
     setColumnsTrack(function (state) {
       var stealFromIndex = columns[splitterId] + stealFromTraversal;
       var addToIndex = columns[splitterId] + addToTraversal;
@@ -803,9 +875,22 @@ var usePaneContext = function usePaneContext() {
   return React.useContext(PaneContext);
 };
 
+var PaneSplitterContext = React.createContext({
+  orientation: 'start',
+  min: 0,
+  max: 0,
+  layoutKey: '',
+  valueNow: 0,
+  size: 0,
+  isRow: false
+});
+var usePaneSplitterContext = function usePaneSplitterContext() {
+  return React.useContext(PaneSplitterContext);
+};
+
 var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
 var orientationToPosition = {
-  start: containerSplitter.SplitterPosition.TRAILS,
+  start: containerSplitter.SplitterPosition.LEADS,
   end: containerSplitter.SplitterPosition.TRAILS,
   top: containerSplitter.SplitterPosition.LEADS,
   bottom: containerSplitter.SplitterPosition.TRAILS
@@ -823,6 +908,7 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = React.forwardRef(function (_ref, ref) {
+  var _separatorProps$ref$c, _separatorProps$ref$c2;
   var providerId = _ref.providerId,
       layoutKey = _ref.layoutKey,
       min = _ref.min,
@@ -832,10 +918,16 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
   var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = React.useContext(styled.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 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,
@@ -846,11 +938,11 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
     environment: window,
     onChange: function onChange(valueNow) {
       if (isRow) {
-        return paneProviderContext && paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+        return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
-      return paneProviderContext && paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+      return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: isRow ? paneProviderContext && paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext && paneProviderContext.getColumnValue(layoutKey, true)
+    valueNow: value
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
@@ -862,11 +954,31 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
   var separatorProps = getSeparatorProps({
     'aria-controls': paneContext.id
   });
-  return React__default["default"].createElement(StyledPaneSplitter, _extends({
+  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 onMouseOver = React.useMemo(function () {
+    return containerUtilities.composeEventHandlers(props.onMouseOver, function (event) {
+      return setIsHovered(event.target === separatorProps.ref.current);
+    });
+  }, [props.onMouseOver, separatorProps.ref]);
+  return React__default["default"].createElement(PaneSplitterContext.Provider, {
+    value: React.useMemo(function () {
+      return {
+        orientation: orientation,
+        layoutKey: layoutKey,
+        min: min,
+        max: max,
+        valueNow: valueInFr,
+        size: size,
+        isRow: isRow
+      };
+    }, [orientation, layoutKey, min, max, valueInFr, size, isRow])
+  }, React__default["default"].createElement(StyledPaneSplitter, _extends({
+    isHovered: isHovered,
     orientation: orientation
   }, separatorProps, props, {
+    onMouseOver: onMouseOver,
     ref: mergeRefs__default["default"]([separatorProps.ref, ref])
-  }));
+  })));
 });
 SplitterComponent.displayName = 'Pane.Splitter';
 SplitterComponent.propTypes = {
@@ -888,6 +1000,76 @@ var ContentComponent = React.forwardRef(function (props, ref) {
 ContentComponent.displayName = 'Pane.Content';
 var Content = ContentComponent;
 
+var SplitterButtonComponent = React.forwardRef(function (props, ref) {
+  var label = props.label,
+      defaultPlacement = props.placement;
+  var _usePaneSplitterConte = usePaneSplitterContext(),
+      orientation = _usePaneSplitterConte.orientation,
+      layoutKey = _usePaneSplitterConte.layoutKey,
+      min = _usePaneSplitterConte.min,
+      max = _usePaneSplitterConte.max,
+      isRow = _usePaneSplitterConte.isRow,
+      valueNow = _usePaneSplitterConte.valueNow,
+      size = _usePaneSplitterConte.size,
+      providerId = _usePaneSplitterConte.providerId;
+  var paneProviderContext = usePaneProviderContextData(providerId);
+  var isTop = orientation === 'top';
+  var isStart = orientation === 'start';
+  var isMin = valueNow === min;
+  var placement = defaultPlacement;
+  if (!defaultPlacement) {
+    if (isRow) {
+      placement = 'center';
+    } else {
+      placement = 'start';
+    }
+  }
+  var setValue = React.useCallback(function (value) {
+    if (isRow) {
+      paneProviderContext.setRowValue(isTop, layoutKey, value);
+    } else {
+      paneProviderContext.setColumnValue(isStart, layoutKey, value);
+    }
+  }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
+  var onClick = containerUtilities.composeEventHandlers(props.onClick, function () {
+    if (isMin) {
+      setValue(max);
+    } else {
+      setValue(min);
+    }
+  });
+  var onKeyDown = containerUtilities.composeEventHandlers(props.onKeyDown, function (event) {
+    return event.stopPropagation();
+  }
+  );
+  var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
+    return event.stopPropagation();
+  }
+  );
+  return React__default["default"].createElement(reactTooltips.Tooltip, {
+    content: label,
+    style: {
+      cursor: 'default'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
+  }, React__default["default"].createElement(StyledPaneSplitterButton, _extends({
+    "aria-label": label
+  }, props, {
+    placement: placement,
+    orientation: orientation,
+    isRotated: isMin,
+    splitterSize: size || 0,
+    ref: ref,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown
+  })));
+});
+SplitterButtonComponent.displayName = 'Pane.SplitterButton';
+var SplitterButton = SplitterButtonComponent;
+
 var _excluded = ["children"];
 var PaneComponent = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -915,6 +1097,7 @@ PaneComponent.displayName = 'Pane';
 var Pane = PaneComponent;
 Pane.Content = Content;
 Pane.Splitter = Splitter;
+Pane.SplitterButton = SplitterButton;
 
 exports.ARRAY_ALIGN_ITEMS = ALIGN_ITEMS;
 exports.ARRAY_ALIGN_SELF = ALIGN_SELF;

package/dist/index.esm.js

@@ -8,11 +8,13 @@
 import React, { createContext, useContext, useMemo, useState, useCallback, forwardRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
-import { math, rgba } from 'polished';
+import { math, rgba, stripUnit } from 'polished';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
-import { useId } from '@zendeskgarden/container-utilities';
+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 { Tooltip } from '@zendeskgarden/react-tooltips';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -177,8 +179,8 @@ var SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 var WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 var ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
-var COMPONENT_ID$5 = 'grid.col';
-var colorStyles$3 = function colorStyles(props) {
+var COMPONENT_ID$6 = 'grid.col';
+var colorStyles$4 = function colorStyles(props) {
   var backgroundColor = getColor('primaryHue', 600, props.theme, 0.1);
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
@@ -223,22 +225,22 @@ var flexStyles$1 = function flexStyles(size, alignSelf, textAlign, offset, order
 var mediaStyles$1 = function mediaStyles(minWidth, size, alignSelf, textAlign, offset, order, props) {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles$1(size, alignSelf, textAlign, offset, order, props));
 };
-var sizeStyles$3 = function sizeStyles(props) {
+var sizeStyles$4 = function sizeStyles(props) {
   var padding = props.gutters ? math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledCol = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
 })(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], function (props) {
   return flexStyles$1(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props);
 }, function (props) {
-  return sizeStyles$3(props);
+  return sizeStyles$4(props);
 }, function (props) {
-  return props.debug && colorStyles$3(props);
+  return props.debug && colorStyles$4(props);
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props);
 }, function (props) {
@@ -250,45 +252,45 @@ var StyledCol = styled.div.attrs({
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$5, props);
+  return retrieveComponentStyles(COMPONENT_ID$6, props);
 });
 StyledCol.defaultProps = {
   columns: 12,
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'grid.grid';
-var colorStyles$2 = function colorStyles(props) {
+var COMPONENT_ID$5 = 'grid.grid';
+var colorStyles$3 = function colorStyles(props) {
   var borderColor = getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
   var borderWidth = math("".concat(props.theme.borderWidths.sm, " * 2"));
   return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
-var sizeStyles$2 = function sizeStyles(props) {
+var sizeStyles$3 = function sizeStyles(props) {
   var padding = props.gutters ? math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
 var StyledGrid = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
 })(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], function (props) {
   return props.theme.rtl && 'rtl';
 }, function (props) {
-  return sizeStyles$2(props);
+  return sizeStyles$3(props);
 }, function (props) {
-  return props.debug && colorStyles$2(props);
+  return props.debug && colorStyles$3(props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
+  return retrieveComponentStyles(COMPONENT_ID$5, props);
 });
 StyledGrid.defaultProps = {
   gutters: 'md',
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'grid.row';
-var colorStyles$1 = function colorStyles(props) {
+var COMPONENT_ID$4 = 'grid.row';
+var colorStyles$2 = function colorStyles(props) {
   var borderColor = getColor(props.theme.palette.mint, 600, props.theme, 0.5);
   var borderWidth = props.theme.borderWidths.sm;
   return css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -313,22 +315,22 @@ var flexStyles = function flexStyles(alignItems, justifyContent, wrap) {
 var mediaStyles = function mediaStyles(minWidth, alignItems, justifyContent, wrap) {
   return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
 };
-var sizeStyles$1 = function sizeStyles(props) {
+var sizeStyles$2 = function sizeStyles(props) {
   var margin = props.gutters ? math("".concat(props.theme.space[props.gutters], " / 2")) : 0;
   return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
 var StyledRow = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
 })(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], function (props) {
   return flexStyles(props.alignItems, props.justifyContent, props.wrapAll);
 }, function (props) {
-  return sizeStyles$1(props);
+  return sizeStyles$2(props);
 }, function (props) {
-  return props.debug && colorStyles$1(props);
+  return props.debug && colorStyles$2(props);
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs);
 }, function (props) {
@@ -340,51 +342,52 @@ var StyledRow = styled.div.attrs({
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$3, props);
+  return retrieveComponentStyles(COMPONENT_ID$4, props);
 });
 StyledRow.defaultProps = {
   wrapAll: 'wrap',
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'pane';
+var COMPONENT_ID$3 = 'pane';
 var StyledPane = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
 })(["position:relative;min-width:0;min-height:0;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
+  return retrieveComponentStyles(COMPONENT_ID$3, props);
 });
 StyledPane.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'pane.content';
+var COMPONENT_ID$2 = 'pane.content';
 var StyledPaneContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
 })(["height:100%;overflow:auto;", ";"], function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
+  return retrieveComponentStyles(COMPONENT_ID$2, props);
 });
 StyledPaneContent.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'pane.splitter';
-var colorStyles = function colorStyles(props) {
+var COMPONENT_ID$1 = 'pane.splitter';
+var colorStyles$1 = function colorStyles(props) {
   var color = getColor('neutralHue', 300, props.theme);
   var hoverColor = getColor('primaryHue', 600, props.theme);
   var activeColor = getColor('primaryHue', 800, props.theme);
   var boxShadow = props.theme.shadows.md(rgba(hoverColor, 0.35));
-  return css(["&::before{background-color:", ";}&:hover::before,&[data-garden-focus-visible]::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";}&:active::before{background-color:", ";}"], color, hoverColor, boxShadow, activeColor);
+  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);
 };
-var sizeStyles = function sizeStyles(props) {
+var sizeStyles$1 = function sizeStyles(props) {
   var size = math("".concat(props.theme.shadowWidths.md, " * 2"));
+  var separatorSize = math("".concat(props.theme.borderWidths.sm, " * 2"));
   var offset = math("-".concat(size, " / 2"));
   var cursor;
   var top;
@@ -439,21 +442,90 @@ var sizeStyles = function sizeStyles(props) {
       }
       break;
   }
-  return css(["display:flex;top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,width 0.25s ease-in-out,height 0.25s ease-in-out;margin:auto;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, width === '100%' ? 'height' : 'width', math("".concat(props.theme.borderWidths.sm, " * 2")), props.theme.borderRadii.md);
+  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,
-  'data-garden-version': '8.52.0'
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.53.2'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["position:absolute;z-index:1;user-select:none;", ";&:hover,&[data-garden-focus-visible]{z-index:2;}&:focus{outline:none;}&::before{display:block;content:'';}", ";", ";"], sizeStyles, colorStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID, props);
+})(["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, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$1, props);
 });
 StyledPaneSplitter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
+var COMPONENT_ID = 'pane.splitter_button';
+var transformStyles = function transformStyles(props) {
+  var degrees = 0;
+  if (props.isRotated) {
+    degrees = props.theme.rtl ? -180 : 180;
+  }
+  if (props.orientation === 'end') {
+    degrees += props.theme.rtl ? -90 : 90;
+  } else if (props.orientation === 'start') {
+    degrees += props.theme.rtl ? 90 : -90;
+  } else if (props.orientation === 'bottom') {
+    degrees += 180;
+  }
+  return css(["& > svg{transform:rotate(", "deg);}"], degrees);
+};
+var colorStyles = function colorStyles(_ref) {
+  var theme = _ref.theme;
+  var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), getColor('chromeHue', 600, theme, 0.15));
+  var focusBoxShadow = theme.shadows.md(getColor('primaryHue', 600, theme, 0.35));
+  return css(["box-shadow:", ";&[data-garden-focus-visible]{box-shadow:", ",", ";}"], boxShadow, focusBoxShadow, boxShadow);
+};
+var sizeStyles = function sizeStyles(props) {
+  var size = "".concat(props.theme.space.base * 6, "px");
+  var display = props.splitterSize <= stripUnit(math("".concat(props.theme.shadowWidths.md, " * 2 + ").concat(size))) && 'none';
+  var isVertical = props.orientation === 'start' || props.orientation === 'end';
+  var top;
+  var left;
+  var right;
+  var bottom;
+  if (props.splitterSize >= stripUnit(math("".concat(size, " * 3")))) {
+    if (props.placement === 'start') {
+      if (isVertical) {
+        top = size;
+      } else if (props.theme.rtl) {
+        right = size;
+      } else {
+        left = size;
+      }
+    } else if (props.placement === 'end') {
+      if (isVertical) {
+        bottom = size;
+      } else if (props.theme.rtl) {
+        left = size;
+      } else {
+        right = size;
+      }
+    }
+  }
+  return css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
+};
+var StyledPaneSplitterButton = styled(ChevronButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.53.2',
+  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, function (props) {
+  return props.theme.colors.background;
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID, props);
+});
+StyledPaneSplitterButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
 var GridContext = createContext({
   gutters: 'md'
 });
@@ -693,8 +765,8 @@ var PaneProvider = function PaneProvider(_ref3) {
   var setColumnValue = useCallback(function (isStart, splitterId, value) {
     var columns = layoutIndices.columns,
         columnArray = layoutIndices.columnArray;
-    var stealFromTraversal = isStart ? 0 : 1;
-    var addToTraversal = isStart ? -1 : 0;
+    var stealFromTraversal = isStart ? -1 : 1;
+    var addToTraversal = 0;
     setColumnsTrack(function (state) {
       var stealFromIndex = columns[splitterId] + stealFromTraversal;
       var addToIndex = columns[splitterId] + addToTraversal;
@@ -792,9 +864,22 @@ var usePaneContext = function usePaneContext() {
   return useContext(PaneContext);
 };
 
+var PaneSplitterContext = createContext({
+  orientation: 'start',
+  min: 0,
+  max: 0,
+  layoutKey: '',
+  valueNow: 0,
+  size: 0,
+  isRow: false
+});
+var usePaneSplitterContext = function usePaneSplitterContext() {
+  return useContext(PaneSplitterContext);
+};
+
 var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
 var orientationToPosition = {
-  start: SplitterPosition.TRAILS,
+  start: SplitterPosition.LEADS,
   end: SplitterPosition.TRAILS,
   top: SplitterPosition.LEADS,
   bottom: SplitterPosition.TRAILS
@@ -812,6 +897,7 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = forwardRef(function (_ref, ref) {
+  var _separatorProps$ref$c, _separatorProps$ref$c2;
   var providerId = _ref.providerId,
       layoutKey = _ref.layoutKey,
       min = _ref.min,
@@ -821,10 +907,16 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
   var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = useContext(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 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,
@@ -835,11 +927,11 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
     environment: window,
     onChange: function onChange(valueNow) {
       if (isRow) {
-        return paneProviderContext && paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+        return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
-      return paneProviderContext && paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+      return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: isRow ? paneProviderContext && paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext && paneProviderContext.getColumnValue(layoutKey, true)
+    valueNow: value
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
@@ -851,11 +943,31 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
   var separatorProps = getSeparatorProps({
     'aria-controls': paneContext.id
   });
-  return React.createElement(StyledPaneSplitter, _extends({
+  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 onMouseOver = useMemo(function () {
+    return composeEventHandlers(props.onMouseOver, function (event) {
+      return setIsHovered(event.target === separatorProps.ref.current);
+    });
+  }, [props.onMouseOver, separatorProps.ref]);
+  return React.createElement(PaneSplitterContext.Provider, {
+    value: useMemo(function () {
+      return {
+        orientation: orientation,
+        layoutKey: layoutKey,
+        min: min,
+        max: max,
+        valueNow: valueInFr,
+        size: size,
+        isRow: isRow
+      };
+    }, [orientation, layoutKey, min, max, valueInFr, size, isRow])
+  }, React.createElement(StyledPaneSplitter, _extends({
+    isHovered: isHovered,
     orientation: orientation
   }, separatorProps, props, {
+    onMouseOver: onMouseOver,
     ref: mergeRefs([separatorProps.ref, ref])
-  }));
+  })));
 });
 SplitterComponent.displayName = 'Pane.Splitter';
 SplitterComponent.propTypes = {
@@ -877,6 +989,76 @@ var ContentComponent = forwardRef(function (props, ref) {
 ContentComponent.displayName = 'Pane.Content';
 var Content = ContentComponent;
 
+var SplitterButtonComponent = forwardRef(function (props, ref) {
+  var label = props.label,
+      defaultPlacement = props.placement;
+  var _usePaneSplitterConte = usePaneSplitterContext(),
+      orientation = _usePaneSplitterConte.orientation,
+      layoutKey = _usePaneSplitterConte.layoutKey,
+      min = _usePaneSplitterConte.min,
+      max = _usePaneSplitterConte.max,
+      isRow = _usePaneSplitterConte.isRow,
+      valueNow = _usePaneSplitterConte.valueNow,
+      size = _usePaneSplitterConte.size,
+      providerId = _usePaneSplitterConte.providerId;
+  var paneProviderContext = usePaneProviderContextData(providerId);
+  var isTop = orientation === 'top';
+  var isStart = orientation === 'start';
+  var isMin = valueNow === min;
+  var placement = defaultPlacement;
+  if (!defaultPlacement) {
+    if (isRow) {
+      placement = 'center';
+    } else {
+      placement = 'start';
+    }
+  }
+  var setValue = useCallback(function (value) {
+    if (isRow) {
+      paneProviderContext.setRowValue(isTop, layoutKey, value);
+    } else {
+      paneProviderContext.setColumnValue(isStart, layoutKey, value);
+    }
+  }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
+  var onClick = composeEventHandlers(props.onClick, function () {
+    if (isMin) {
+      setValue(max);
+    } else {
+      setValue(min);
+    }
+  });
+  var onKeyDown = composeEventHandlers(props.onKeyDown, function (event) {
+    return event.stopPropagation();
+  }
+  );
+  var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
+    return event.stopPropagation();
+  }
+  );
+  return React.createElement(Tooltip, {
+    content: label,
+    style: {
+      cursor: 'default'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
+  }, React.createElement(StyledPaneSplitterButton, _extends({
+    "aria-label": label
+  }, props, {
+    placement: placement,
+    orientation: orientation,
+    isRotated: isMin,
+    splitterSize: size || 0,
+    ref: ref,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown
+  })));
+});
+SplitterButtonComponent.displayName = 'Pane.SplitterButton';
+var SplitterButton = SplitterButtonComponent;
+
 var _excluded = ["children"];
 var PaneComponent = forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -904,5 +1086,6 @@ PaneComponent.displayName = 'Pane';
 var Pane = PaneComponent;
 Pane.Content = Content;
 Pane.Splitter = Splitter;
+Pane.SplitterButton = SplitterButton;
 
 export { ALIGN_ITEMS as ARRAY_ALIGN_ITEMS, ALIGN_SELF as ARRAY_ALIGN_SELF, DIRECTION as ARRAY_DIRECTION, JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT, SPACE as ARRAY_SPACE, TEXT_ALIGN as ARRAY_TEXT_ALIGN, WRAP as ARRAY_WRAP, Col, Grid, Pane, PaneProvider, Row };

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

@@ -7,10 +7,12 @@
 import React from 'react';
 import { Splitter } from './components/Splitter';
 import { Content } from './components/Content';
+import { SplitterButton } from './components/SplitterButton';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Pane: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>> & {
     Content: typeof Content;
     Splitter: typeof Splitter;
+    SplitterButton: typeof SplitterButton;
 };

package/dist/typings/elements/pane/components/SplitterButton.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 React from 'react';
+import { ISplitterButtonProps } from '../../../types';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
+export declare const SplitterButton: React.ForwardRefExoticComponent<ISplitterButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/index.d.ts

@@ -10,4 +10,4 @@ export { Row } from './elements/Row';
 export { PaneProvider } from './elements/pane/PaneProvider';
 export { Pane } from './elements/pane/Pane';
 export { ALIGN_ITEMS as ARRAY_ALIGN_ITEMS, ALIGN_SELF as ARRAY_ALIGN_SELF, DIRECTION as ARRAY_DIRECTION, JUSTIFY_CONTENT as ARRAY_JUSTIFY_CONTENT, TEXT_ALIGN as ARRAY_TEXT_ALIGN, SPACE as ARRAY_SPACE, WRAP as ARRAY_WRAP } from './types';
-export type { IPaneProviderProps, ISplitterProps, IColProps, IGridProps, IRowProps, AlignItems as ALIGN_ITEMS, AlignSelf as ALIGN_SELF, Direction as DIRECTION, JustifyContent as JUSTIFY_CONTENT, TextAlign as TEXT_ALIGN, GridNumber as GRID_NUMBER, Breakpoint as BREAKPOINT, Space as SPACE, Wrap as WRAP } from './types';
+export type { IPaneProviderProps, ISplitterProps, ISplitterButtonProps, IColProps, IGridProps, IRowProps, AlignItems as ALIGN_ITEMS, AlignSelf as ALIGN_SELF, Direction as DIRECTION, JustifyContent as JUSTIFY_CONTENT, TextAlign as TEXT_ALIGN, GridNumber as GRID_NUMBER, Breakpoint as BREAKPOINT, Space as SPACE, Wrap as WRAP } from './types';

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

@@ -10,3 +10,4 @@ export * from './StyledRow';
 export * from './pane/StyledPane';
 export * from './pane/StyledPaneContent';
 export * from './pane/StyledPaneSplitter';
+export * from './pane/StyledPaneSplitterButton';

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

@@ -7,8 +7,13 @@
 import { DefaultTheme } from 'styled-components';
 import { Orientation } from '../../types';
 interface IStyledPaneSplitterProps {
+    isHovered: boolean;
     orientation: Orientation;
 }
+/**
+ * 1. Elevated initial context to pickup full-width hover
+ * 2. Stack below splitter button.
+ */
 export declare const StyledPaneSplitter: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;

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

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import { DefaultTheme } from 'styled-components';
+import { ISplitterButtonProps, Orientation, PLACEMENT } from '../../types';
+interface IStyledSplitterButtonProps extends ISplitterButtonProps {
+    orientation: Orientation;
+    placement: typeof PLACEMENT[number];
+    isRotated: boolean;
+    splitterSize: number;
+}
+/**
+ * 1. Opaque "dish" behind transparent button
+ */
+export declare const StyledPaneSplitterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, DefaultTheme, IStyledSplitterButtonProps, never>;
+export {};

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

@@ -4,7 +4,7 @@
  * 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 { ReactNode, HTMLAttributes } from 'react';
+import { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
 export declare const ALIGN_ITEMS: readonly ["start", "end", "center", "baseline", "stretch"];
 export declare const ALIGN_SELF: readonly ["auto", "start", "end", "center", "baseline", "stretch"];
 export declare const DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
@@ -12,6 +12,7 @@ export declare const JUSTIFY_CONTENT: readonly ["start", "end", "center", "betwe
 export declare const TEXT_ALIGN: readonly ["start", "end", "center", "justify"];
 export declare const SPACE: readonly [false, "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
 export declare const WRAP: readonly ["nowrap", "wrap", "wrap-reverse"];
+export declare const PLACEMENT: readonly ["end", "start", "center"];
 export declare type AlignItems = typeof ALIGN_ITEMS[number];
 export declare type AlignSelf = typeof ALIGN_SELF[number];
 export declare type Direction = typeof DIRECTION[number];
@@ -205,3 +206,9 @@ export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
     /** Determines splitter orientation within a pane */
     orientation?: Orientation;
 }
+export interface ISplitterButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default. */
+    placement?: typeof PLACEMENT[number];
+    /** Renders the provided label text inside a tooltip */
+    label: string;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import { ISplitterProps, Orientation } from '../types';
+interface IPaneSplitterContext {
+    orientation?: Orientation;
+    min: ISplitterProps['min'];
+    max: ISplitterProps['max'];
+    layoutKey: ISplitterProps['layoutKey'];
+    valueNow?: number;
+    size?: number;
+    isRow: boolean;
+    providerId?: ISplitterProps['providerId'];
+}
+export declare const PaneSplitterContext: import("react").Context<IPaneSplitterContext>;
+/**
+ * Retrieve Pane Splitter component context
+ */
+declare const usePaneSplitterContext: () => IPaneSplitterContext;
+export default usePaneSplitterContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.52.0",
+  "version": "8.53.2",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,6 +23,8 @@
   "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",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0"
@@ -34,8 +36,8 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.52.0",
-    "use-resize-observer": "^9.0.0"
+    "@zendeskgarden/react-theming": "^8.53.2",
+    "use-resize-observer": "9.0.0"
   },
   "keywords": [
     "components",
@@ -47,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "1bc3c4a001a73769a5e33b7431e8b5f895b7caec"
+  "gitHead": "b4ef84eb8f6606659aee9e689b8b44cb1feb0b87"
 }