@zendeskgarden/react-grid 8.62.1 → 8.63.0

package/README.md

@@ -103,3 +103,8 @@ import { PaneProvider, Pane } from '@zendeskgarden/react-grid';
   </PaneProvider>
 </ThemeProvider>;
 ```
+
+> the `Pane` component uses [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
+> which is not available in node.js or other server side environments (if testing with Jest) - please
+> make sure to polyfill as needed. Since the ref used internally is not created when server side rendering,
+> the ResizeObserver API will not be invoked and should not pose an issue when doing so.

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
@@ -16,16 +14,18 @@ var polished = require('polished');
 var reactTheming = require('@zendeskgarden/react-theming');
 var reactButtons = require('@zendeskgarden/react-buttons');
 var containerUtilities = require('@zendeskgarden/container-utilities');
+var useResizeObserver = require('use-resize-observer');
 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 }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -101,9 +101,9 @@ const sizeStyles$4 = props => {
   const padding = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-const StyledCol = styled__default["default"].div.attrs({
+const StyledCol = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -123,9 +123,9 @@ const sizeStyles$3 = props => {
   const padding = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["padding-right:", ";padding-left:", ";"], padding, padding);
 };
-const StyledGrid = styled__default["default"].div.attrs({
+const StyledGrid = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -165,9 +165,9 @@ const sizeStyles$2 = props => {
   const margin = props.gutters ? polished.math(`${props.theme.space[props.gutters]} / 2`) : 0;
   return styled.css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
 };
-const StyledRow = styled__default["default"].div.attrs({
+const StyledRow = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -178,9 +178,9 @@ StyledRow.defaultProps = {
 };
 
 const COMPONENT_ID$3 = 'pane';
-const StyledPane = styled__default["default"].div.attrs({
+const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -190,13 +190,13 @@ StyledPane.defaultProps = {
 };
 
 const COMPONENT_ID$2 = 'pane.content';
-const StyledPaneContent = styled__default["default"].div.attrs({
+const StyledPaneContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledPaneContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -270,9 +270,9 @@ const sizeStyles$1 = props => {
   const dimensionProperty = width === '100%' ? 'height' : 'width';
   return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
-const StyledPaneSplitter = styled__default["default"].div.attrs({
+const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -333,9 +333,9 @@ const sizeStyles = props => {
   }
   return styled.css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
 };
-const StyledPaneSplitterButton = styled__default["default"](reactButtons.ChevronButton).attrs({
+const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -354,7 +354,7 @@ const useGridContext = () => {
   return React.useContext(GridContext);
 };
 
-const Col = React__default["default"].forwardRef((_ref, ref) => {
+const Col = React__default.default.forwardRef((_ref, ref) => {
   let {
     size,
     ...props
@@ -364,7 +364,7 @@ const Col = React__default["default"].forwardRef((_ref, ref) => {
     gutters,
     debug
   } = useGridContext();
-  return React__default["default"].createElement(StyledCol, _extends({
+  return React__default.default.createElement(StyledCol, _extends({
     sizeAll: size,
     columns: columns,
     gutters: gutters,
@@ -374,39 +374,39 @@ const Col = React__default["default"].forwardRef((_ref, ref) => {
 });
 Col.displayName = 'Col';
 Col.propTypes = {
-  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  xs: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  sm: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  md: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  lg: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  xl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool]),
-  alignSelf: PropTypes__default["default"].oneOf(ALIGN_SELF),
-  alignSelfXs: PropTypes__default["default"].oneOf(ALIGN_SELF),
-  alignSelfSm: PropTypes__default["default"].oneOf(ALIGN_SELF),
-  alignSelfMd: PropTypes__default["default"].oneOf(ALIGN_SELF),
-  alignSelfLg: PropTypes__default["default"].oneOf(ALIGN_SELF),
-  alignSelfXl: PropTypes__default["default"].oneOf(ALIGN_SELF),
-  textAlign: PropTypes__default["default"].oneOf(TEXT_ALIGN),
-  textAlignXs: PropTypes__default["default"].oneOf(TEXT_ALIGN),
-  textAlignSm: PropTypes__default["default"].oneOf(TEXT_ALIGN),
-  textAlignMd: PropTypes__default["default"].oneOf(TEXT_ALIGN),
-  textAlignLg: PropTypes__default["default"].oneOf(TEXT_ALIGN),
-  textAlignXl: PropTypes__default["default"].oneOf(TEXT_ALIGN),
-  offset: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  offsetXs: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  offsetSm: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  offsetMd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  offsetLg: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  offsetXl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  order: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  orderXs: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  orderSm: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  orderMd: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  orderLg: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  orderXl: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
+  size: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  xs: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string, PropTypes__default.default.bool]),
+  sm: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string, PropTypes__default.default.bool]),
+  md: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string, PropTypes__default.default.bool]),
+  lg: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string, PropTypes__default.default.bool]),
+  xl: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string, PropTypes__default.default.bool]),
+  alignSelf: PropTypes__default.default.oneOf(ALIGN_SELF),
+  alignSelfXs: PropTypes__default.default.oneOf(ALIGN_SELF),
+  alignSelfSm: PropTypes__default.default.oneOf(ALIGN_SELF),
+  alignSelfMd: PropTypes__default.default.oneOf(ALIGN_SELF),
+  alignSelfLg: PropTypes__default.default.oneOf(ALIGN_SELF),
+  alignSelfXl: PropTypes__default.default.oneOf(ALIGN_SELF),
+  textAlign: PropTypes__default.default.oneOf(TEXT_ALIGN),
+  textAlignXs: PropTypes__default.default.oneOf(TEXT_ALIGN),
+  textAlignSm: PropTypes__default.default.oneOf(TEXT_ALIGN),
+  textAlignMd: PropTypes__default.default.oneOf(TEXT_ALIGN),
+  textAlignLg: PropTypes__default.default.oneOf(TEXT_ALIGN),
+  textAlignXl: PropTypes__default.default.oneOf(TEXT_ALIGN),
+  offset: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  offsetXs: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  offsetSm: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  offsetMd: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  offsetLg: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  offsetXl: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  order: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  orderXs: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  orderSm: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  orderMd: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  orderLg: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  orderXl: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string])
 };
 
-const Grid = React__default["default"].forwardRef((_ref, ref) => {
+const Grid = React__default.default.forwardRef((_ref, ref) => {
   let {
     columns,
     debug,
@@ -417,25 +417,25 @@ const Grid = React__default["default"].forwardRef((_ref, ref) => {
     gutters: props.gutters,
     debug
   }), [columns, props.gutters, debug]);
-  return React__default["default"].createElement(GridContext.Provider, {
+  return React__default.default.createElement(GridContext.Provider, {
     value: value
-  }, React__default["default"].createElement(StyledGrid, _extends({
+  }, React__default.default.createElement(StyledGrid, _extends({
     debug: debug,
     ref: ref
   }, props)));
 });
 Grid.displayName = 'Grid';
 Grid.propTypes = {
-  columns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  gutters: PropTypes__default["default"].oneOf(SPACE),
-  debug: PropTypes__default["default"].bool
+  columns: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
+  gutters: PropTypes__default.default.oneOf(SPACE),
+  debug: PropTypes__default.default.bool
 };
 Grid.defaultProps = {
   columns: 12,
   gutters: 'md'
 };
 
-const Row = React__default["default"].forwardRef((_ref, ref) => {
+const Row = React__default.default.forwardRef((_ref, ref) => {
   let {
     wrap,
     ...props
@@ -444,7 +444,7 @@ const Row = React__default["default"].forwardRef((_ref, ref) => {
     gutters,
     debug
   } = useGridContext();
-  return React__default["default"].createElement(StyledRow, _extends({
+  return React__default.default.createElement(StyledRow, _extends({
     gutters: gutters,
     debug: debug,
     wrapAll: wrap,
@@ -453,24 +453,24 @@ const Row = React__default["default"].forwardRef((_ref, ref) => {
 });
 Row.displayName = 'Row';
 Row.propTypes = {
-  alignItems: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
-  alignItemsXs: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
-  alignItemsSm: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
-  alignItemsMd: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
-  alignItemsLg: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
-  alignItemsXl: PropTypes__default["default"].oneOf(ALIGN_ITEMS),
-  justifyContent: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
-  justifyContentXs: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
-  justifyContentSm: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
-  justifyContentMd: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
-  justifyContentLg: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
-  justifyContentXl: PropTypes__default["default"].oneOf(JUSTIFY_CONTENT),
-  wrap: PropTypes__default["default"].oneOf(WRAP),
-  wrapXs: PropTypes__default["default"].oneOf(WRAP),
-  wrapSm: PropTypes__default["default"].oneOf(WRAP),
-  wrapMd: PropTypes__default["default"].oneOf(WRAP),
-  wrapLg: PropTypes__default["default"].oneOf(WRAP),
-  wrapXl: PropTypes__default["default"].oneOf(WRAP)
+  alignItems: PropTypes__default.default.oneOf(ALIGN_ITEMS),
+  alignItemsXs: PropTypes__default.default.oneOf(ALIGN_ITEMS),
+  alignItemsSm: PropTypes__default.default.oneOf(ALIGN_ITEMS),
+  alignItemsMd: PropTypes__default.default.oneOf(ALIGN_ITEMS),
+  alignItemsLg: PropTypes__default.default.oneOf(ALIGN_ITEMS),
+  alignItemsXl: PropTypes__default.default.oneOf(ALIGN_ITEMS),
+  justifyContent: PropTypes__default.default.oneOf(JUSTIFY_CONTENT),
+  justifyContentXs: PropTypes__default.default.oneOf(JUSTIFY_CONTENT),
+  justifyContentSm: PropTypes__default.default.oneOf(JUSTIFY_CONTENT),
+  justifyContentMd: PropTypes__default.default.oneOf(JUSTIFY_CONTENT),
+  justifyContentLg: PropTypes__default.default.oneOf(JUSTIFY_CONTENT),
+  justifyContentXl: PropTypes__default.default.oneOf(JUSTIFY_CONTENT),
+  wrap: PropTypes__default.default.oneOf(WRAP),
+  wrapXs: PropTypes__default.default.oneOf(WRAP),
+  wrapSm: PropTypes__default.default.oneOf(WRAP),
+  wrapMd: PropTypes__default.default.oneOf(WRAP),
+  wrapLg: PropTypes__default.default.oneOf(WRAP),
+  wrapXl: PropTypes__default.default.oneOf(WRAP)
 };
 
 const PaneProviderContext = React.createContext({});
@@ -643,9 +643,9 @@ const PaneProvider = _ref2 => {
       }
     }
   } : {}, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
-  return React__default["default"].createElement(PaneProviderContext.Provider, {
+  return React__default.default.createElement(PaneProviderContext.Provider, {
     value: paneProviderContext
-  }, children === null || children === void 0 ? void 0 : children({
+  }, children?.({
     id: providerId,
     getRowValue,
     getColumnValue,
@@ -655,15 +655,15 @@ const PaneProvider = _ref2 => {
 };
 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,
-  defaultColumnValues: PropTypes__default["default"].object,
-  rowValues: PropTypes__default["default"].object,
-  columnValues: PropTypes__default["default"].object,
-  onChange: PropTypes__default["default"].func,
-  children: PropTypes__default["default"].func
+  id: PropTypes__default.default.string,
+  totalPanesWidth: PropTypes__default.default.number.isRequired,
+  totalPanesHeight: PropTypes__default.default.number.isRequired,
+  defaultRowValues: PropTypes__default.default.object,
+  defaultColumnValues: PropTypes__default.default.object,
+  rowValues: PropTypes__default.default.object,
+  columnValues: PropTypes__default.default.object,
+  onChange: PropTypes__default.default.func,
+  children: PropTypes__default.default.func
 };
 
 const PaneContext = React.createContext({
@@ -699,7 +699,6 @@ const orientationToDimension = {
   bottom: 'rows'
 };
 const SplitterComponent = React.forwardRef((_ref, ref) => {
-  var _separatorRef$current, _separatorRef$current2;
   let {
     providerId,
     layoutKey,
@@ -722,8 +721,8 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
   const separatorRef = React.useRef(null);
   const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
   const pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
-  const value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
-  const valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
+  const value = isRow ? paneProviderContext?.getRowValue(layoutKey, true) : paneProviderContext?.getColumnValue(layoutKey, true);
+  const valueInFr = isRow ? paneProviderContext?.getRowValue(layoutKey) : paneProviderContext?.getColumnValue(layoutKey);
   const {
     getSeparatorProps,
     getPrimaryPaneProps
@@ -737,9 +736,9 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
     environment,
     onChange: valueNow => {
       if (isRow) {
-        return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+        return paneProviderContext?.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
-      return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+      return paneProviderContext?.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
     valueNow: value,
     separatorRef
@@ -758,9 +757,9 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
     onKeyDown,
     onClick
   });
-  const 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;
+  const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
   const onMouseOver = React.useMemo(() => containerUtilities.composeEventHandlers(props.onMouseOver, event => setIsHovered(event.target === separatorRef.current)), [props.onMouseOver, separatorRef]);
-  return React__default["default"].createElement(PaneSplitterContext.Provider, {
+  return React__default.default.createElement(PaneSplitterContext.Provider, {
     value: React.useMemo(() => ({
       orientation,
       layoutKey,
@@ -770,22 +769,22 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
       size,
       isRow
     }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
-  }, React__default["default"].createElement(StyledPaneSplitter, _extends({
+  }, React__default.default.createElement(StyledPaneSplitter, _extends({
     isHovered: isHovered,
     isFixed: isFixed,
     orientation: orientation
   }, separatorProps, props, {
     onMouseOver: onMouseOver,
-    ref: mergeRefs__default["default"]([separatorRef, ref])
+    ref: mergeRefs__default.default([separatorRef, ref])
   })));
 });
 SplitterComponent.displayName = 'Pane.Splitter';
 SplitterComponent.propTypes = {
-  layoutKey: PropTypes__default["default"].string.isRequired,
-  min: PropTypes__default["default"].number.isRequired,
-  max: PropTypes__default["default"].number.isRequired,
-  orientation: PropTypes__default["default"].oneOf(ORIENTATION),
-  isFixed: PropTypes__default["default"].bool
+  layoutKey: PropTypes__default.default.string.isRequired,
+  min: PropTypes__default.default.number.isRequired,
+  max: PropTypes__default.default.number.isRequired,
+  orientation: PropTypes__default.default.oneOf(ORIENTATION),
+  isFixed: PropTypes__default.default.bool
 };
 SplitterComponent.defaultProps = {
   orientation: 'end'
@@ -793,7 +792,11 @@ SplitterComponent.defaultProps = {
 const Splitter = SplitterComponent;
 
 const ContentComponent = React.forwardRef((props, ref) => {
-  return React__default["default"].createElement(StyledPaneContent, _extends({
+  const {
+    isVisible
+  } = usePaneContext();
+  return React__default.default.createElement(StyledPaneContent, _extends({
+    hidden: !isVisible,
     ref: ref
   }, props));
 });
@@ -845,13 +848,13 @@ const SplitterButtonComponent = React.forwardRef((props, ref) => {
   );
   const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
   );
-  return React__default["default"].createElement(reactTooltips.Tooltip, {
+  return React__default.default.createElement(reactTooltips.Tooltip, {
     content: label,
     style: {
       cursor: 'default'
     },
     onMouseDown: e => e.stopPropagation()
-  }, React__default["default"].createElement(StyledPaneSplitterButton, _extends({
+  }, React__default.default.createElement(StyledPaneSplitterButton, _extends({
     "aria-label": label
   }, props, {
     placement: placement,
@@ -873,15 +876,24 @@ const PaneComponent = React.forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const [paneId, setPaneId] = React.useState();
+  const observerRef = React.useRef(null);
+  const {
+    width = 0,
+    height = 0
+  } = useResizeObserver__default.default({
+    ref: observerRef
+  });
+  const isVisible = React.useMemo(() => observerRef.current ? width > 0 && height > 0 : true, [width, height]);
   const paneContext = React.useMemo(() => ({
+    isVisible,
     id: paneId,
     setId: id => setPaneId(id)
-  }), [paneId]);
-  return React__default["default"].createElement(PaneContext.Provider, {
+  }), [paneId, isVisible]);
+  return React__default.default.createElement(PaneContext.Provider, {
     value: paneContext
-  }, React__default["default"].createElement(StyledPane, _extends({
+  }, React__default.default.createElement(StyledPane, _extends({
     id: paneId,
-    ref: ref
+    ref: mergeRefs__default.default([ref, observerRef])
   }, props), children));
 });
 PaneComponent.displayName = 'Pane';

package/dist/index.esm.js

@@ -12,6 +12,7 @@ import { math, rgba, stripUnit } from 'polished';
 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 useResizeObserver from 'use-resize-observer';
 import mergeRefs from 'react-merge-refs';
 import { useSplitter } from '@zendeskgarden/container-splitter';
 import { Tooltip } from '@zendeskgarden/react-tooltips';
@@ -92,7 +93,7 @@ const sizeStyles$4 = props => {
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -114,7 +115,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -156,7 +157,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -169,7 +170,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -181,11 +182,11 @@ StyledPane.defaultProps = {
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledPaneContent.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -261,7 +262,7 @@ const sizeStyles$1 = props => {
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -324,7 +325,7 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   isBasic: true,
   isPill: true,
   size: 'small'
@@ -634,7 +635,7 @@ const PaneProvider = _ref2 => {
   } : {}, [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({
+  }, children?.({
     id: providerId,
     getRowValue,
     getColumnValue,
@@ -688,7 +689,6 @@ const orientationToDimension = {
   bottom: 'rows'
 };
 const SplitterComponent = forwardRef((_ref, ref) => {
-  var _separatorRef$current, _separatorRef$current2;
   let {
     providerId,
     layoutKey,
@@ -711,8 +711,8 @@ const SplitterComponent = forwardRef((_ref, ref) => {
   const separatorRef = useRef(null);
   const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
   const pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
-  const value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
-  const valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
+  const value = isRow ? paneProviderContext?.getRowValue(layoutKey, true) : paneProviderContext?.getColumnValue(layoutKey, true);
+  const valueInFr = isRow ? paneProviderContext?.getRowValue(layoutKey) : paneProviderContext?.getColumnValue(layoutKey);
   const {
     getSeparatorProps,
     getPrimaryPaneProps
@@ -726,9 +726,9 @@ const SplitterComponent = forwardRef((_ref, ref) => {
     environment,
     onChange: valueNow => {
       if (isRow) {
-        return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
+        return paneProviderContext?.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
-      return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
+      return paneProviderContext?.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
     valueNow: value,
     separatorRef
@@ -747,7 +747,7 @@ const SplitterComponent = forwardRef((_ref, ref) => {
     onKeyDown,
     onClick
   });
-  const 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;
+  const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
   const onMouseOver = useMemo(() => composeEventHandlers(props.onMouseOver, event => setIsHovered(event.target === separatorRef.current)), [props.onMouseOver, separatorRef]);
   return React.createElement(PaneSplitterContext.Provider, {
     value: useMemo(() => ({
@@ -782,7 +782,11 @@ SplitterComponent.defaultProps = {
 const Splitter = SplitterComponent;
 
 const ContentComponent = forwardRef((props, ref) => {
+  const {
+    isVisible
+  } = usePaneContext();
   return React.createElement(StyledPaneContent, _extends({
+    hidden: !isVisible,
     ref: ref
   }, props));
 });
@@ -862,15 +866,24 @@ const PaneComponent = forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const [paneId, setPaneId] = useState();
+  const observerRef = useRef(null);
+  const {
+    width = 0,
+    height = 0
+  } = useResizeObserver({
+    ref: observerRef
+  });
+  const isVisible = useMemo(() => observerRef.current ? width > 0 && height > 0 : true, [width, height]);
   const paneContext = useMemo(() => ({
+    isVisible,
     id: paneId,
     setId: id => setPaneId(id)
-  }), [paneId]);
+  }), [paneId, isVisible]);
   return React.createElement(PaneContext.Provider, {
     value: paneContext
   }, React.createElement(StyledPane, _extends({
     id: paneId,
-    ref: ref
+    ref: mergeRefs([ref, observerRef])
   }, props), children));
 });
 PaneComponent.displayName = 'Pane';

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

@@ -9,7 +9,7 @@ import { DefaultTheme } from 'styled-components';
 import { ISplitterButtonProps, Orientation, PLACEMENT } from '../../types';
 interface IStyledSplitterButtonProps extends ISplitterButtonProps {
     orientation: Orientation;
-    placement: typeof PLACEMENT[number];
+    placement: (typeof PLACEMENT)[number];
     isRotated: boolean;
     splitterSize: number;
 }

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

@@ -13,15 +13,15 @@ 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];
-export declare type JustifyContent = typeof JUSTIFY_CONTENT[number];
-export declare type TextAlign = typeof TEXT_ALIGN[number];
-export declare type GridNumber = number | string;
-export declare type Breakpoint = number | string | boolean;
-export declare type Space = typeof SPACE[number];
-export declare type Wrap = typeof WRAP[number];
+export type AlignItems = (typeof ALIGN_ITEMS)[number];
+export type AlignSelf = (typeof ALIGN_SELF)[number];
+export type Direction = (typeof DIRECTION)[number];
+export type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
+export type TextAlign = (typeof TEXT_ALIGN)[number];
+export type GridNumber = number | string;
+export type Breakpoint = number | string | boolean;
+export type Space = (typeof SPACE)[number];
+export type Wrap = (typeof WRAP)[number];
 export interface IColProps extends HTMLAttributes<HTMLDivElement> {
     /** Sets the total number of grid `columns` that the column spans on all screen sizes */
     size?: number | string;
@@ -154,7 +154,7 @@ export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
     wrapXl?: Wrap;
 }
 export declare const ORIENTATION: readonly ["top", "bottom", "start", "end"];
-export declare type Orientation = typeof ORIENTATION[number];
+export type Orientation = (typeof ORIENTATION)[number];
 export interface IPaneProviderProps {
     /** Identifies the pane provider */
     id?: string;
@@ -210,7 +210,7 @@ export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
 }
 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];
+    placement?: (typeof PLACEMENT)[number];
     /** Renders the provided label text inside a tooltip */
     label: string;
 }

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

@@ -7,6 +7,7 @@
 /// <reference types="react" />
 interface IPaneContext {
     id?: string;
+    isVisible?: boolean;
     setId: (id: string) => void;
 }
 export declare const PaneContext: import("react").Context<IPaneContext>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.62.1",
+  "version": "8.63.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,11 +23,12 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.3",
     "@zendeskgarden/container-utilities": "^1.0.0",
-    "@zendeskgarden/react-buttons": "^8.62.1",
-    "@zendeskgarden/react-tooltips": "^8.62.1",
+    "@zendeskgarden/react-buttons": "^8.63.0",
+    "@zendeskgarden/react-tooltips": "^8.63.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
-    "react-merge-refs": "^1.1.0"
+    "react-merge-refs": "^1.1.0",
+    "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.1.0",
@@ -36,8 +37,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.62.1",
-    "use-resize-observer": "9.1.0"
+    "@zendeskgarden/react-theming": "^8.63.0"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }