@zendeskgarden/react-grid 8.51.0 → 8.52.0

package/dist/index.cjs.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var polished = require('polished');
 var reactTheming = require('@zendeskgarden/react-theming');
+var containerUtilities = require('@zendeskgarden/container-utilities');
 var mergeRefs = require('react-merge-refs');
 var containerSplitter = require('@zendeskgarden/container-splitter');
 
@@ -239,7 +240,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledCol = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -279,7 +280,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledGrid = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -329,7 +330,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledRow = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -360,7 +361,7 @@ StyledRow.defaultProps = {
 var COMPONENT_ID$2 = 'pane';
 var StyledPane = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -374,7 +375,7 @@ StyledPane.defaultProps = {
 var COMPONENT_ID$1 = 'pane.content';
 var StyledPaneContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -453,11 +454,11 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledPaneSplitter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["position:absolute;z-index:1;", ";&:hover,&[data-garden-focus-visible]{z-index:2;}&:focus{outline:none;}&::before{display:block;content:'';}", ";", ";"], sizeStyles, colorStyles, function (props) {
+})(["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);
 });
 StyledPaneSplitter.defaultProps = {
@@ -587,30 +588,14 @@ Row.propTypes = {
   wrapXl: PropTypes__default["default"].oneOf(WRAP)
 };
 
-var SplitterContext = React.createContext({
-  setRowValue: function setRowValue() {
-    return undefined;
-  },
-  setColumnValue: function setColumnValue() {
-    return undefined;
-  },
-  getColumnValue: function getColumnValue() {
-    return 0;
-  },
-  getRowValue: function getRowValue() {
-    return 0;
-  },
-  rowState: {},
-  columnState: {},
-  totalPanesHeight: 1,
-  totalPanesWidth: 1,
-  pixelsPerFr: {
-    rows: 0,
-    columns: 0
-  }
-});
-var useSplitterContext = function useSplitterContext() {
-  return React.useContext(SplitterContext);
+var PaneProviderContext = React.createContext({});
+var usePaneProviderContextData = function usePaneProviderContextData(providerId) {
+  var context = React.useContext(PaneProviderContext);
+  var id = providerId || context.providerId;
+  return id && context.contextData ? context.contextData[id] : undefined;
+};
+var usePaneProviderContext = function usePaneProviderContext() {
+  return React.useContext(PaneProviderContext);
 };
 
 var getPixelsPerFr = function getPixelsPerFr(totalFrs, totalDimension) {
@@ -626,7 +611,8 @@ var convertToPixels = function convertToPixels(values, pixelsPerFr) {
   }, {});
 };
 var PaneProvider = function PaneProvider(_ref3) {
-  var totalPanesWidth = _ref3.totalPanesWidth,
+  var id = _ref3.id,
+      totalPanesWidth = _ref3.totalPanesWidth,
       totalPanesHeight = _ref3.totalPanesHeight,
       defaultRowValues = _ref3.defaultRowValues,
       defaultColumnValues = _ref3.defaultColumnValues,
@@ -646,17 +632,17 @@ var PaneProvider = function PaneProvider(_ref3) {
   var rowsTrack = isControlled ? rowValues : rowState;
   var columnsTrack = isControlled ? columnValues : columnState;
   var setRowsTrack = React.useCallback(function (values) {
-    if (onChange) {
+    if (isControlled && onChange) {
       return onChange(values(rowsTrack), columnsTrack);
     }
     return setRowState(values);
-  }, [onChange, setRowState, columnsTrack, rowsTrack]);
+  }, [isControlled, onChange, setRowState, columnsTrack, rowsTrack]);
   var setColumnsTrack = React.useCallback(function (values) {
-    if (onChange) {
+    if (isControlled && onChange) {
       return onChange(rowsTrack, values(columnsTrack));
     }
     return setColumnState(values);
-  }, [onChange, setColumnState, rowsTrack, columnsTrack]);
+  }, [isControlled, onChange, setColumnState, rowsTrack, columnsTrack]);
   var totalFractions = React.useMemo(function () {
     return {
       rows: Object.values(rowsTrack).reduce(function (prev, value) {
@@ -697,15 +683,15 @@ var PaneProvider = function PaneProvider(_ref3) {
       columnArray: columnArray
     };
   }, [rowsTrack, columnsTrack]);
-  var setRowValue = React.useCallback(function (isTop, id, value) {
+  var setRowValue = React.useCallback(function (isTop, splitterId, value) {
     var rows = layoutIndices.rows,
         rowArray = layoutIndices.rowArray;
     var stealFromTraversal = isTop ? -1 : 1;
     var addToTraversal = 0;
     setRowsTrack(function (state) {
-      var oldValue = rowsTrack[id];
-      var stealFromIndex = rows[id] + stealFromTraversal;
-      var addToIndex = rows[id] + addToTraversal;
+      var oldValue = rowsTrack[splitterId];
+      var stealFromIndex = rows[splitterId] + stealFromTraversal;
+      var addToIndex = rows[splitterId] + addToTraversal;
       var stealFromKey = rowArray[stealFromIndex];
       var addToKey = rowArray[addToIndex];
       var difference = oldValue - value;
@@ -715,15 +701,15 @@ var PaneProvider = function PaneProvider(_ref3) {
       return nextState;
     });
   }, [layoutIndices, rowsTrack, setRowsTrack]);
-  var setColumnValue = React.useCallback(function (isStart, id, value) {
+  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;
     setColumnsTrack(function (state) {
-      var stealFromIndex = columns[id] + stealFromTraversal;
-      var addToIndex = columns[id] + addToTraversal;
-      var oldValue = columnsTrack[id];
+      var stealFromIndex = columns[splitterId] + stealFromTraversal;
+      var addToIndex = columns[splitterId] + addToTraversal;
+      var oldValue = columnsTrack[splitterId];
       var stealFromKey = columnArray[stealFromIndex];
       var addToKey = columnArray[addToIndex];
       var difference = oldValue - value;
@@ -767,22 +753,28 @@ var PaneProvider = function PaneProvider(_ref3) {
       return "".concat(rowsTrack[row], "fr");
     }).join(' ');
   }, [layoutIndices, rowsTrack, layoutStateInPixels]);
-  var splitterContext = React.useMemo(function () {
-    return {
-      columnState: columnState,
-      rowState: rowState,
-      setRowValue: setRowValue,
-      setColumnValue: setColumnValue,
-      getRowValue: getRowValue,
-      getColumnValue: getColumnValue,
-      totalPanesHeight: totalPanesHeight,
-      totalPanesWidth: totalPanesWidth,
-      pixelsPerFr: pixelsPerFr
-    };
-  }, [rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
-  return React__default["default"].createElement(SplitterContext.Provider, {
-    value: splitterContext
+  var providerId = containerUtilities.useId(id);
+  var parentPaneProviderContext = usePaneProviderContext();
+  var paneProviderContext = React.useMemo(function () {
+    return providerId ? {
+      providerId: providerId,
+      contextData: _objectSpread2(_objectSpread2({}, parentPaneProviderContext.contextData), {}, _defineProperty({}, providerId, {
+        columnState: columnState,
+        rowState: rowState,
+        setRowValue: setRowValue,
+        setColumnValue: setColumnValue,
+        getRowValue: getRowValue,
+        getColumnValue: getColumnValue,
+        totalPanesHeight: totalPanesHeight,
+        totalPanesWidth: totalPanesWidth,
+        pixelsPerFr: pixelsPerFr
+      }))
+    } : {};
+  }, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
+  return React__default["default"].createElement(PaneProviderContext.Provider, {
+    value: paneProviderContext
   }, children === null || children === void 0 ? void 0 : children({
+    id: providerId,
     getRowValue: getRowValue,
     getColumnValue: getColumnValue,
     getGridTemplateColumns: getGridTemplateColumns,
@@ -791,6 +783,7 @@ var PaneProvider = function PaneProvider(_ref3) {
 };
 PaneProvider.displayName = 'PaneProvider';
 PaneProvider.propTypes = {
+  id: PropTypes__default["default"].string,
   totalPanesWidth: PropTypes__default["default"].number.isRequired,
   totalPanesHeight: PropTypes__default["default"].number.isRequired,
   defaultRowValues: PropTypes__default["default"].object,
@@ -810,7 +803,7 @@ var usePaneContext = function usePaneContext() {
   return React.useContext(PaneContext);
 };
 
-var _excluded$1 = ["layoutKey", "min", "max", "orientation"];
+var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
 var orientationToPosition = {
   start: containerSplitter.SplitterPosition.TRAILS,
   end: containerSplitter.SplitterPosition.TRAILS,
@@ -830,18 +823,19 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = React.forwardRef(function (_ref, ref) {
-  var layoutKey = _ref.layoutKey,
+  var providerId = _ref.providerId,
+      layoutKey = _ref.layoutKey,
       min = _ref.min,
       max = _ref.max,
       orientation = _ref.orientation,
       props = _objectWithoutProperties(_ref, _excluded$1);
-  var splitterContext = useSplitterContext();
+  var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = React.useContext(styled.ThemeContext);
   var position = orientationToPosition[orientation];
   var isRow = orientationToDimension[orientation] === 'rows';
   var splitterOrientation = paneToSplitterOrientation[orientation];
-  var pixelsPerFr = splitterContext.pixelsPerFr[orientationToDimension[orientation]];
+  var pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
   var _useSplitter = containerSplitter.useSplitter({
     type: containerSplitter.SplitterType.VARIABLE,
     orientation: splitterOrientation,
@@ -852,11 +846,11 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
     environment: window,
     onChange: function onChange(valueNow) {
       if (isRow) {
-        return splitterContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+        return paneProviderContext && paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
-      return splitterContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+      return paneProviderContext && paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: isRow ? splitterContext.getRowValue(layoutKey, true) : splitterContext.getColumnValue(layoutKey, true)
+    valueNow: isRow ? paneProviderContext && paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext && paneProviderContext.getColumnValue(layoutKey, true)
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;

package/dist/index.esm.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
 import { math, rgba } from 'polished';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { useId } from '@zendeskgarden/container-utilities';
 import mergeRefs from 'react-merge-refs';
 import { SplitterPosition, SplitterOrientation, useSplitter, SplitterType } from '@zendeskgarden/container-splitter';
 
@@ -228,7 +229,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -268,7 +269,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -318,7 +319,7 @@ var sizeStyles$1 = function sizeStyles(props) {
 };
 var StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -349,7 +350,7 @@ StyledRow.defaultProps = {
 var COMPONENT_ID$2 = 'pane';
 var StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -363,7 +364,7 @@ StyledPane.defaultProps = {
 var COMPONENT_ID$1 = 'pane.content';
 var StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -442,11 +443,11 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.51.0'
+  'data-garden-version': '8.52.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["position:absolute;z-index:1;", ";&:hover,&[data-garden-focus-visible]{z-index:2;}&:focus{outline:none;}&::before{display:block;content:'';}", ";", ";"], sizeStyles, colorStyles, function (props) {
+})(["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);
 });
 StyledPaneSplitter.defaultProps = {
@@ -576,30 +577,14 @@ Row.propTypes = {
   wrapXl: PropTypes.oneOf(WRAP)
 };
 
-var SplitterContext = createContext({
-  setRowValue: function setRowValue() {
-    return undefined;
-  },
-  setColumnValue: function setColumnValue() {
-    return undefined;
-  },
-  getColumnValue: function getColumnValue() {
-    return 0;
-  },
-  getRowValue: function getRowValue() {
-    return 0;
-  },
-  rowState: {},
-  columnState: {},
-  totalPanesHeight: 1,
-  totalPanesWidth: 1,
-  pixelsPerFr: {
-    rows: 0,
-    columns: 0
-  }
-});
-var useSplitterContext = function useSplitterContext() {
-  return useContext(SplitterContext);
+var PaneProviderContext = createContext({});
+var usePaneProviderContextData = function usePaneProviderContextData(providerId) {
+  var context = useContext(PaneProviderContext);
+  var id = providerId || context.providerId;
+  return id && context.contextData ? context.contextData[id] : undefined;
+};
+var usePaneProviderContext = function usePaneProviderContext() {
+  return useContext(PaneProviderContext);
 };
 
 var getPixelsPerFr = function getPixelsPerFr(totalFrs, totalDimension) {
@@ -615,7 +600,8 @@ var convertToPixels = function convertToPixels(values, pixelsPerFr) {
   }, {});
 };
 var PaneProvider = function PaneProvider(_ref3) {
-  var totalPanesWidth = _ref3.totalPanesWidth,
+  var id = _ref3.id,
+      totalPanesWidth = _ref3.totalPanesWidth,
       totalPanesHeight = _ref3.totalPanesHeight,
       defaultRowValues = _ref3.defaultRowValues,
       defaultColumnValues = _ref3.defaultColumnValues,
@@ -635,17 +621,17 @@ var PaneProvider = function PaneProvider(_ref3) {
   var rowsTrack = isControlled ? rowValues : rowState;
   var columnsTrack = isControlled ? columnValues : columnState;
   var setRowsTrack = useCallback(function (values) {
-    if (onChange) {
+    if (isControlled && onChange) {
       return onChange(values(rowsTrack), columnsTrack);
     }
     return setRowState(values);
-  }, [onChange, setRowState, columnsTrack, rowsTrack]);
+  }, [isControlled, onChange, setRowState, columnsTrack, rowsTrack]);
   var setColumnsTrack = useCallback(function (values) {
-    if (onChange) {
+    if (isControlled && onChange) {
       return onChange(rowsTrack, values(columnsTrack));
     }
     return setColumnState(values);
-  }, [onChange, setColumnState, rowsTrack, columnsTrack]);
+  }, [isControlled, onChange, setColumnState, rowsTrack, columnsTrack]);
   var totalFractions = useMemo(function () {
     return {
       rows: Object.values(rowsTrack).reduce(function (prev, value) {
@@ -686,15 +672,15 @@ var PaneProvider = function PaneProvider(_ref3) {
       columnArray: columnArray
     };
   }, [rowsTrack, columnsTrack]);
-  var setRowValue = useCallback(function (isTop, id, value) {
+  var setRowValue = useCallback(function (isTop, splitterId, value) {
     var rows = layoutIndices.rows,
         rowArray = layoutIndices.rowArray;
     var stealFromTraversal = isTop ? -1 : 1;
     var addToTraversal = 0;
     setRowsTrack(function (state) {
-      var oldValue = rowsTrack[id];
-      var stealFromIndex = rows[id] + stealFromTraversal;
-      var addToIndex = rows[id] + addToTraversal;
+      var oldValue = rowsTrack[splitterId];
+      var stealFromIndex = rows[splitterId] + stealFromTraversal;
+      var addToIndex = rows[splitterId] + addToTraversal;
       var stealFromKey = rowArray[stealFromIndex];
       var addToKey = rowArray[addToIndex];
       var difference = oldValue - value;
@@ -704,15 +690,15 @@ var PaneProvider = function PaneProvider(_ref3) {
       return nextState;
     });
   }, [layoutIndices, rowsTrack, setRowsTrack]);
-  var setColumnValue = useCallback(function (isStart, id, value) {
+  var setColumnValue = useCallback(function (isStart, splitterId, value) {
     var columns = layoutIndices.columns,
         columnArray = layoutIndices.columnArray;
     var stealFromTraversal = isStart ? 0 : 1;
     var addToTraversal = isStart ? -1 : 0;
     setColumnsTrack(function (state) {
-      var stealFromIndex = columns[id] + stealFromTraversal;
-      var addToIndex = columns[id] + addToTraversal;
-      var oldValue = columnsTrack[id];
+      var stealFromIndex = columns[splitterId] + stealFromTraversal;
+      var addToIndex = columns[splitterId] + addToTraversal;
+      var oldValue = columnsTrack[splitterId];
       var stealFromKey = columnArray[stealFromIndex];
       var addToKey = columnArray[addToIndex];
       var difference = oldValue - value;
@@ -756,22 +742,28 @@ var PaneProvider = function PaneProvider(_ref3) {
       return "".concat(rowsTrack[row], "fr");
     }).join(' ');
   }, [layoutIndices, rowsTrack, layoutStateInPixels]);
-  var splitterContext = useMemo(function () {
-    return {
-      columnState: columnState,
-      rowState: rowState,
-      setRowValue: setRowValue,
-      setColumnValue: setColumnValue,
-      getRowValue: getRowValue,
-      getColumnValue: getColumnValue,
-      totalPanesHeight: totalPanesHeight,
-      totalPanesWidth: totalPanesWidth,
-      pixelsPerFr: pixelsPerFr
-    };
-  }, [rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
-  return React.createElement(SplitterContext.Provider, {
-    value: splitterContext
+  var providerId = useId(id);
+  var parentPaneProviderContext = usePaneProviderContext();
+  var paneProviderContext = useMemo(function () {
+    return providerId ? {
+      providerId: providerId,
+      contextData: _objectSpread2(_objectSpread2({}, parentPaneProviderContext.contextData), {}, _defineProperty({}, providerId, {
+        columnState: columnState,
+        rowState: rowState,
+        setRowValue: setRowValue,
+        setColumnValue: setColumnValue,
+        getRowValue: getRowValue,
+        getColumnValue: getColumnValue,
+        totalPanesHeight: totalPanesHeight,
+        totalPanesWidth: totalPanesWidth,
+        pixelsPerFr: pixelsPerFr
+      }))
+    } : {};
+  }, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
+  return React.createElement(PaneProviderContext.Provider, {
+    value: paneProviderContext
   }, children === null || children === void 0 ? void 0 : children({
+    id: providerId,
     getRowValue: getRowValue,
     getColumnValue: getColumnValue,
     getGridTemplateColumns: getGridTemplateColumns,
@@ -780,6 +772,7 @@ var PaneProvider = function PaneProvider(_ref3) {
 };
 PaneProvider.displayName = 'PaneProvider';
 PaneProvider.propTypes = {
+  id: PropTypes.string,
   totalPanesWidth: PropTypes.number.isRequired,
   totalPanesHeight: PropTypes.number.isRequired,
   defaultRowValues: PropTypes.object,
@@ -799,7 +792,7 @@ var usePaneContext = function usePaneContext() {
   return useContext(PaneContext);
 };
 
-var _excluded$1 = ["layoutKey", "min", "max", "orientation"];
+var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
 var orientationToPosition = {
   start: SplitterPosition.TRAILS,
   end: SplitterPosition.TRAILS,
@@ -819,18 +812,19 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = forwardRef(function (_ref, ref) {
-  var layoutKey = _ref.layoutKey,
+  var providerId = _ref.providerId,
+      layoutKey = _ref.layoutKey,
       min = _ref.min,
       max = _ref.max,
       orientation = _ref.orientation,
       props = _objectWithoutProperties(_ref, _excluded$1);
-  var splitterContext = useSplitterContext();
+  var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = useContext(ThemeContext);
   var position = orientationToPosition[orientation];
   var isRow = orientationToDimension[orientation] === 'rows';
   var splitterOrientation = paneToSplitterOrientation[orientation];
-  var pixelsPerFr = splitterContext.pixelsPerFr[orientationToDimension[orientation]];
+  var pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
   var _useSplitter = useSplitter({
     type: SplitterType.VARIABLE,
     orientation: splitterOrientation,
@@ -841,11 +835,11 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
     environment: window,
     onChange: function onChange(valueNow) {
       if (isRow) {
-        return splitterContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+        return paneProviderContext && paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
-      return splitterContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+      return paneProviderContext && paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: isRow ? splitterContext.getRowValue(layoutKey, true) : splitterContext.getColumnValue(layoutKey, true)
+    valueNow: isRow ? paneProviderContext && paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext && paneProviderContext.getColumnValue(layoutKey, true)
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;

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

@@ -7,9 +7,10 @@
 import PropTypes from 'prop-types';
 import { IPaneProviderProps } from '../../types';
 export declare const PaneProvider: {
-    ({ totalPanesWidth, totalPanesHeight, defaultRowValues, defaultColumnValues, rowValues, columnValues, onChange, children }: IPaneProviderProps): JSX.Element;
+    ({ id, totalPanesWidth, totalPanesHeight, defaultRowValues, defaultColumnValues, rowValues, columnValues, onChange, children }: IPaneProviderProps): JSX.Element;
     displayName: string;
     propTypes: {
+        id: PropTypes.Requireable<string>;
         totalPanesWidth: PropTypes.Validator<number>;
         totalPanesHeight: PropTypes.Validator<number>;
         defaultRowValues: PropTypes.Requireable<object>;

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

@@ -155,6 +155,8 @@ export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
 export declare const ORIENTATION: readonly ["top", "bottom", "start", "end"];
 export declare type Orientation = typeof ORIENTATION[number];
 export interface IPaneProviderProps {
+    /** Identifies the pane provider */
+    id?: string;
     /** Provides the total width, in `px` units, of all panes in the layout */
     totalPanesWidth: number;
     /** Provides the total height, in `px` units, of all panes in the layout */
@@ -175,14 +177,16 @@ export interface IPaneProviderProps {
      */
     onChange?: (rowValues: Record<string, number>, columnValues: Record<string, number>) => void;
     /**
-     * Surfaces render prop functions for applying splitter state to the supporting layout
+     * Surfaces render props for applying splitter state to the supporting layout
      *
+     * @param id Provides the `id` prop, if specified; otherwise, a generated ID.
      * @param getColumnValue Gets column value by key
      * @param getRowValue Gets row value by key
      * @param getGridTemplateRows Gets grid template rows track
      * @param getGridTemplateColumns Gets grid template columns track
      */
-    children?: ({ getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
+    children?: ({ id, getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
+        id: string;
         getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
         getRowValue: (splitterKey: string, isPixels?: boolean) => number;
         getGridTemplateRows: (isPixels?: boolean) => string;
@@ -190,6 +194,8 @@ export interface IPaneProviderProps {
     }) => ReactNode;
 }
 export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Identifies the associated `PaneProvider`. Assumes the closest parent provider, by default. */
+    providerId?: string;
     /** Specifies the splitter key */
     layoutKey: string;
     /** Sets a minimum, in `fr` units, for splitter position */

package/dist/typings/utils/{useSplitterContext.d.ts → usePaneProviderContext.d.ts}

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 /// <reference types="react" />
-interface ISplitterContext {
+interface IPaneProviderContextData {
     rowState: Record<string, number>;
     columnState: Record<string, number>;
     setRowValue: (isTop: boolean, id: string, value: number) => void;
@@ -19,9 +19,11 @@ interface ISplitterContext {
         columns: number;
     };
 }
-export declare const SplitterContext: import("react").Context<ISplitterContext>;
-/**
- * Retrieve Splitter component context
- */
-declare const useSplitterContext: () => ISplitterContext;
-export default useSplitterContext;
+interface IPaneProviderContext {
+    providerId?: string;
+    contextData?: Record<string, IPaneProviderContextData>;
+}
+export declare const PaneProviderContext: import("react").Context<IPaneProviderContext>;
+export declare const usePaneProviderContextData: (providerId?: string | undefined) => IPaneProviderContextData | undefined;
+declare const usePaneProviderContext: () => IPaneProviderContext;
+export default usePaneProviderContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.51.0",
+  "version": "8.52.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,6 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-splitter": "^0.2.3",
+    "@zendeskgarden/container-utilities": "^0.7.1",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0"
@@ -33,7 +34,8 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.51.0"
+    "@zendeskgarden/react-theming": "^8.52.0",
+    "use-resize-observer": "^9.0.0"
   },
   "keywords": [
     "components",
@@ -45,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a932647429f0a79984650d2521f357ed8320d1d0"
+  "gitHead": "1bc3c4a001a73769a5e33b7431e8b5f895b7caec"
 }